zoukankan      html  css  js  c++  java
  • jQuery如何阻止子元素继承父元素事件?

    <a>
        <b></b>
    </a>
    $("a").click(...);
    

    这种绑定的话,b也会响应一次事件,如何只对a元素绑定事件,而不对子元素绑定呢?即b被click之后自己并不触发回调函数,而是把事件传递给a。

    我现在的做法是:直接在a上写 <a onclick="xxx"></a> ,这样b就不会把自己作为event.target触发回调了.

    --- 更新 ----
    大家可能对我的意思有误解,我不是要阻止事件冒泡,恰恰相反,我是要b在接受到click事件的时候直接把事件向上传递给a,就像我在代码里面指定的那样

    ---- 再次更新 ---
    代码是这样的

    $('a').click(function(evt){
           var self = $(evt.target);
           self.addClass('btn-primary');
    });
    

    这时候,如果点击了b, 那么b会被加上btn-primary这个class,但是我想点击了b,也只是给a添加 这个class,希望处理事件的对象是a,不是b

    javascript 工作机制是这样的,当你点击内层的元素 b 时,首先浏览器会捕获这个事件,并定位当前的 DOM 元素,接下来采用冒泡机制,向上查找父元素,直到找到绑定了点击事件的元素 a 为止。

    你是希望阻止这种冒泡还是什么呢?或者题主可以直接贴代码,再写需求。:)
    你可以实现这么几个需求:
    1.阻止事件冒泡,但不阻止默认行为。如 stopPropagation 或楼上用的 cancelBubble等。
    2.阻止默认行为,但不阻止事件冒泡。如 preventDefault 方法。
    3.同时阻止事件冒泡和默认行为。直接 return false 即可。

    给b添加一个事件,里面禁止事件冒泡就行了 (这样也能消除父级对子级的影响)-->e.cancelBubble = true;

    eg :

       <script type="text/javascript">
        function f1(e){
            alert("你点击了一个链接");
            //取消冒泡
            e.cancelBubble = true;
        }
        function f2(e){
                alert("你点击了一个DIV");
        }
         </script>
        </head>
        <body style="font-size:30px;">
            <div onclick="f2(event);">
                <a href="javascript:;" onclick="f1(event);">ClickMe</a>
         </div>
        </body>
  • 相关阅读:
    java 集合list遍历时删除元素
    循环中的continue功能
    sql中的!=判断的注意事项
    oracle中时间处理
    judge return character
    ashamed
    char and number transform
    将十进制转化为二进制
    算法和程序
    输入分子和分母,打印出前1000位小数
  • 原文地址:https://www.cnblogs.com/tancp/p/3877889.html
Copyright © 2011-2022 走看看