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

    JS中点击事件冒泡阻止

    解析:

    一个div层'out',内含有一个div层'in'。如下:

    两个层都绑定了点击事件,但是点击in层的时候,点击事件会出现冒泡现象,同时也会触发out层的点击事件。

    但是并不希望触发out的点击事件,只希望触发in层的点击事件,所以要阻止冒泡事件。

    解决方法:

    e.preventDefault()

    案例代码:

    <!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>

    参考自:https://www.cnblogs.com/mdorg/p/5617408.html

        http://blog.csdn.net/abb_chen/article/details/49406649

  • 相关阅读:
    四.Oracle聚合函数和内外全连接
    三.Oracle常用数据类型及单行函数总结
    二.Sql语言的分类及运算符
    一.Oracle的安装与连接
    Maven环境的配置
    javaSE基础总结篇04
    javaSE基础总结篇03
    javaSE基础总结篇02
    JavaSE基础篇总结01
    表分区
  • 原文地址:https://www.cnblogs.com/s313139232/p/8358193.html
Copyright © 2011-2022 走看看