• 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>
  • 相关阅读:
    initramfs扫描磁盘前改变磁盘上电顺序
    “井号键”用英语怎么说?
    syslog,rsyslog and syslog-ng
    glob (programming) and spool (/var/spool)
    CentOS 6.5语言包裁剪
    C​P​U​_​C​S​t​a​t​e​_​P​S​t​a​t​e and then ACPI on Wiki
    we are experimenting with a new init system and it is fun
    linux init->upstart->systemd
    微信浏览器内建的WeixinJSBridge 实现“返回”操作
    npm i node-sass 报错&npm 镜像切换
  • 原文地址:https://www.cnblogs.com/tancp/p/3877889.html
Copyright © 2020-2023  润新知