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

jQuery如何阻止子元素继承父元素事件？的更多相关文章

  1. Javascript禁止子元素继承父元素的事件

    3种方法1.在父元素事件的function中加if(event.target==this){ }2.子元素事件function最后加event.stopPropgation():// 阻止事件冒泡3. ...

  2. jquery如何阻止子元素继承父元素的事件（又称事件冒泡）

    非常简单,子元素上添加如下代码即可 $('a').click(function(e){ e.stopPropagation(); }); 老版本为event,现在用e就行

  3. javascript阻止子元素继承父元素事件

    $('.box').on('click', function (e) { if(e.target == this) { console.log(e.target) } })

  4. I do not want to inherit the child opacity from the parent in CSS(不想让子元素继承父元素的透明度)

    Instead of using opacity, set a background-color with rgba, where 'a' is the level of transparency. ...

  5. jquery如何阻止子元素相应mouseout事件

    jquery如何阻止子元素相应mouseout事件:mouseout有一个特点,当鼠标移入子元素的时候,也会触发此事件,但是在实际应用中这个特点往往不是我们想要的,下面就通过代码实例介绍一下如何实现此 ...

  6. jQuery学习笔记---兄弟元素、子元素和父元素的获取

    我们这里主要总结jQuery中对某元素的兄弟元素.子元素和父元素的获取,原声的Javascript代码对这些元素的获取比较麻烦一些,而jQuery正好对这些方法进行封装,让我们更加方便的对这些元素进行 ...

  7. jQuery中兄弟元素、子元素和父元素的获取

    我们这里主要总结jQuery中对某元素的兄弟元素.子元素和父元素的获取,原声的Javascript代码对这些元素的获取比较麻烦一些,而jQuery正好对这些方法进行封装,让我们更加方便的对这些元素进行 ...

  8. 一个 VUE 组件：实现子元素 scroll 父元素容器不跟随滚动（兼容PC、移动端）

    介绍 我们经常遇到一种情况.当滑动滚动条区域时,子元素滚动条到底部或顶部时就会触发父级滚动条,父级滚动条同理会继续向上触发,直至body容器.这是浏览器默认的滚动行为. 但是很多情况,我们想要子元素滚 ...

  9. WPF XMAL获取元素的父元素，子元素

    /// 获得指定元素的父元素 /// </summary> /// <typeparam name="T">指定页面元素</typeparam> ...

随机推荐

  1. Windows Azure 基本操作手册

    http://www.cnblogs.com/sennly/p/4139663.html 基本测试信息 登陆地址:https://manage.windowsazure.cn(Azure管理门户,适用 ...

  2. HW2.23

    import java.util.Scanner; public class Solution { public static void main(String[] args) { Scanner i ...

  3. HDU3727 - Jewel(主席树)

    题目大意 对一个序列进行以下四种操作: 1.Insert x 在序列尾部插入x 2.Query_1 s t k 查询区间[s,t]的第k小 3.Query_2 x 查询x的在序列中排名 4.Query ...

  4. 15个实用的Linux find命令示例

    妈咪,我找到了! -- 15个实用的Linux find命令示例 http://www.oschina.net/translate/15-practical-linux-find-command-ex ...

  5. iOS 使用fir、 蒲公英 进行内部测试

    fir 蒲公英需要去注册账号并认证,按提示即可完成. 测了公司账号.个人开发账号,2个都可以用,就是要在配置文件里加上测试者的udid. 步骤: 1.添加测试机的udid edit配置文件,添加刚刚加 ...

  6. Android_消息机制

    Android通过Looper.Handler来实现消息循环机制. Android的消息循环是针对线程的,每个线程都可以有自己的消息队列和消息循环. Android系统中的Looper负责管理线程的消 ...

  7. Unsupervised Feature Learning and Deep Learning(UFLDL) Exercise 总结

    7.27 暑假开始后,稍有时间,“搞完”金融项目,便开始跑跑 Deep Learning的程序 Hinton 在Nature上文章的代码 跑了3天 也没跑完 后来Debug 把batch 从200改到 ...

  8. android88 录音机

    package com.itheima.recorder; import android.os.Bundle; import android.app.Activity; import android. ...

  9. 实现类似shared_ptr的引用计数

    13.27 定义使用引用计数版本的HasPtr #include<iostream> #include<string> #include<new> using na ...

  10. Word转换为图片PDF

    1.        Word转换为PDF,程序很多,但转换后的PDF,还可以复制,虽可以加密禁止复制,但市场上太多的PDF,还可以把PDF转换Word等其他格式,很容易被别人利用和剽窃,即便是PDF加 ...