zoukankan      html  css  js  c++  java
  • JS中点击事件冒泡解析

    关于Javascript中的点击事件冒泡的问题,很多初学者都处理不好。

    什么是点击事件冒泡?

    例:

    今天我去小明家找他玩。正好小明、小明的爸爸、小明的爷爷在客厅一起看电视。

    我对小明说:”咱们出去玩吧“。

    小明十分乐意的回答到:”好啊“。

    小明的爸爸听到后,说到:”把作业写完后在出去玩“。

    小明的爷爷也发话了:”预报有雷阵雨,就别出去玩了“。

    我本来只是询问一下小明的意见,结果他爸比和爷爷对我说的话做出的反应影响到了小明接下来的行为。

    这次之后,我和小明私下约定好。以后去找他玩的,都会去他房间里讲话,避免他家人听到。

    这就叫事件阻止行为,只有天知地知你知我知,避免其他人造成不必要的影响。

    废话说了那么多,不知道大家明白了没有。直接上代码:

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>点击事件冒泡处理</title>
        <script type="text/javascript">
            var fun1 = function (e) {
                alert("我是父点击事件");
            }
            var fun2 = function (e) {
                e.stopPropagation();//阻止点击事件向上冒泡
                alert("我是子点击事件");
            }
        </script>
    </head>
    <body>
        <div onclick="fun1(event)" style="height:100px;background-color:black;color:white;text-align:center;border:1px solid red">
            父节点
            <div onclick="fun2(event)" style="margin-top:20px;border:1px solid red;height:30px">
                子节点
            </div>
        </div>
    </body>
    </html>

    子节点的点击事件会上父一级传递的,就像上述代码中说表明的,在点击事件触发fun2的时候,接下来也会触发fun1。在大部分的逻辑中,我们不是很希望这样。在就需要在点击子节点的时候,中止父节点接下来的行为。

    再补充一点比较特殊的点击事件:

    如果要取消某些DOM元素单击后的缺省处理函数,比如转到其它页面或是提交表单,为了取消这些缺省实际处理,可以调用e.preventDefault()

    备注:这里只是对一般情况的点击事件冒泡做了说明。

  • 相关阅读:
    发布NBearV3最终测试版v3.2.5
    NBearV3教程——Web篇
    JUnit中的设计模式:命令模式
    HTTP协议 通信过程介绍
    JUnit中的设计模式:适配器模式
    《Head First设计模式》 读书笔记15 其余的模式(一) 桥接 生成器 责任链
    SQL基础:数据库规范化与三范式
    《Head First设计模式》 读书笔记13 复合模式 MVC模式
    Android Tab标签的使用基础
    Android设备上的传感器模拟工具:SensorSimulator
  • 原文地址:https://www.cnblogs.com/mdorg/p/5617408.html
Copyright © 2011-2022 走看看