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

  • 相关阅读:
    BZOJ1513: [POI2006]Tet-Tetris 3D
    BZOJ3210: 花神的浇花集会
    BZOJ3207: 花神的嘲讽计划Ⅰ
    BZOJ3170: [Tjoi 2013]松鼠聚会
    BZOJ3747: [POI2015]Kinoman
    解题:POI 2008 Subdivision of Kingdom
    解题:JSOI 2007 重要的城市
    解题:USACO13NOV No Change
    解题:洛谷1120 小木棍
    解题:SCOI 2008 配对
  • 原文地址:https://www.cnblogs.com/s313139232/p/8358193.html
Copyright © 2011-2022 走看看