使用原生js 实现点击消失效果

不打扰是莪最后的温柔 提交于 2020-03-15 21:52:50

JQ版

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function () {
            $("p").click(function () {
                $(this).hide();
            });
        });
    </script>
</head>

<body>
    <p>如果你点我,我就会消失。</p>
    <p>继续点我!</p>
    <p>接着点我!</p>
</body>

</html>

JS版

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>

</head>

<body>
    <p>如果你点我,我就会消失。</p>
    <p>继续点我!</p>
    <p>接着点我!</p>

    <script>
        // 使用原生js 实现点击消失效果
        window.onload = function () {

            var ppp = document.getElementsByTagName("p");
            console.log(ppp)
            if (ppp.length > 0) {
                for (var i = 0; i < ppp.length; i++) {
                    console.log(ppp[i])
                    ppp[i].addEventListener("click", function () {
                        this.hidden = true;
                    });
                }
            }

        }
    </script>
</body>

</html>

有时间再详细说一下js的事件冒泡和事件捕获。

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!