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>
jQuery如何阻止子元素继承父元素事件？的更多相关文章
- Javascript禁止子元素继承父元素的事件
3种方法1.在父元素事件的function中加if(event.target==this){ }2.子元素事件function最后加event.stopPropgation():// 阻止事件冒泡3. ...
- jquery如何阻止子元素继承父元素的事件（又称事件冒泡）
非常简单,子元素上添加如下代码即可 $('a').click(function(e){ e.stopPropagation(); }); 老版本为event,现在用e就行
- javascript阻止子元素继承父元素事件
$('.box').on('click', function (e) { if(e.target == this) { console.log(e.target) } })
- 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. ...
- jquery如何阻止子元素相应mouseout事件
jquery如何阻止子元素相应mouseout事件:mouseout有一个特点,当鼠标移入子元素的时候,也会触发此事件,但是在实际应用中这个特点往往不是我们想要的,下面就通过代码实例介绍一下如何实现此 ...
- jQuery学习笔记---兄弟元素、子元素和父元素的获取
我们这里主要总结jQuery中对某元素的兄弟元素.子元素和父元素的获取,原声的Javascript代码对这些元素的获取比较麻烦一些,而jQuery正好对这些方法进行封装,让我们更加方便的对这些元素进行 ...
- jQuery中兄弟元素、子元素和父元素的获取
我们这里主要总结jQuery中对某元素的兄弟元素.子元素和父元素的获取,原声的Javascript代码对这些元素的获取比较麻烦一些,而jQuery正好对这些方法进行封装,让我们更加方便的对这些元素进行 ...
- 一个 VUE 组件：实现子元素 scroll 父元素容器不跟随滚动（兼容PC、移动端）
介绍 我们经常遇到一种情况.当滑动滚动条区域时,子元素滚动条到底部或顶部时就会触发父级滚动条,父级滚动条同理会继续向上触发,直至body容器.这是浏览器默认的滚动行为. 但是很多情况,我们想要子元素滚 ...
- WPF XMAL获取元素的父元素，子元素
/// 获得指定元素的父元素 /// </summary> /// <typeparam name="T">指定页面元素</typeparam> ...
随机推荐
- oracle 高水位线
一.oracle 高水位线详解 一.什么是水线(High Water Mark)? 概念: 1.块: 是粒度最小的存储单位,现在标准的块大小是8K,ORACLE每一次I/O操作也是按块来操作的,也就是 ...
- OpenStack swift安装
由于实验室项目需要云存储系统,因此在实验室服务器上搭建一个基于OpenStack swift的云存储系统. 最开始按照官方网站上介绍的方法,使用SAIO方式安装http://docs.openstac ...
- bzoj 2754 [SCOI2012]喵星球上的点名（后缀数组）
[题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=2754 [题意] 每只喵有名姓,如果被老师点到名或姓的子串都要答道,但每只喵一次点名只答 ...
- Codeforces Round #343 (Div. 2) B. Far Relative’s Problem
题意:n个人,在规定时间范围内,找到最多有多少对男女能一起出面. 思路:ans=max(2*min(一天中有多少个人能出面)) #include<iostream> #include< ...
- Mac IDEA快捷键积累
切来切去:Ctrl+Tab 在打开的不同类中切换来切换去 完美代码结构:Alt+Command+L 不同编辑点跳转:Alt+Command+↔️ 快速重写:Ctrl+N 快速选择代码:Alt+Shif ...
- HDU 2554 N对数的排列问题
LINK:HDU 2554 这是昨天晚上小练里面比较有趣的一道题~我在做的时候思路错了,以为数字的排列会有规律,结果后面发现就算有也很难找......╮(╯▽╰)╭ 看了网上的题解,有一种恍然大悟的感 ...
- mmsql 查询每个分类的前3条数据
select * from (select *,row_number() over(partition by PropertyRoofBeamID order by PropertyRoomID de ...
- 字符串匹配之KMP算法
KMP算法使用前缀函数来模拟有限自动机的后缀函数,前缀函数通过计算模式与其自身的偏移匹配的信息,本身的证明很复杂,关键在于弄懂其核心思想,下面就不赘述了,仅仅贴出代码: #include <io ...
- JBoss 目录结构
安装JBoss 会创建下列目录结构: 目录 描述 bin 启动和关闭JBoss 的脚本 client 客户端与JBoss 通信所需的Java 库(JARs) docs 配置的样本文件(数据库配置 ...
- tomcat热部署，更改java类不用重新加载context
修改类后,tomcat热部署会重新加载整个项目的context,影响开发效率.网上查的大多数是将server的modules标签中Auto Reload项改为Disabled,但是没有效果. 使用以下 ...