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> ...
随机推荐
- 文件同步工具BT Sync介绍和使用说明
BT Sync介绍 BT 下载,相信大伙儿都知道的.今儿个要介绍的 BT Sync,跟 BT 下载一样,都是 BitTorrent 公司发明滴玩意儿,都是采用 P2P 协议来进行传输. 简而言之,BT ...
- phpMyAdmin安装设置
phpMyAdmin是一种MySQL的管理工具,它直接从web上去管理MySQL. 假设你的web(网页存放)根目录是 /var/www/ 假设你的主机web访问是这样的 http://192.1 ...
- Excel中VBA 连接 数据库 方法- 摘自网络
Sub GetData() Dim strConn As String, strSQL As String Dim conn As ADODB.Connection Dim ds As ADODB.R ...
- Yii框架CGridView columns中使用数组或变量传值
继续Yii框架的学习与使用,CGridView对于网站后台而言十分有用处,可以很快速地实现数据列表显示,并集成排序,搜索等功能,很巧妙. 今天,在项目中遇到了状态显示问题,在controller中定义 ...
- JS多态
面向对象语言有三大特征,前面介绍了封装和继承,那么JS作为一门面向对象语言,有多态么,又怎么实现多态呢? 我们先看看多态的概念: 多态:同一操作作用于不同的对象,可以有不同的解释,产生不同的执行结果. ...
- Redis集群战法整理
单机及集群搭建 http://www.codeceo.com/article/distributed-caching-redis-server.html 主从复制设置 Redis服务器复制(主—从配置 ...
- SpringMVC学习系列 之 表单标签
http://www.cnblogs.com/liukemng/p/3754211.html 本篇我们来学习Spring MVC表单标签的使用,借助于Spring MVC提供的表单标签可以让我们在视图 ...
- Windows环境下安装Ionic
1. 首先要安装node环境,Ionic的安装和后续的许多前端工具的安装都依赖于node的包管理器npm. nodeJs环境的安装很简单,去官网下载最新版的NodeJs直接安装即可. Nod ...
- EasyUI Datagrid 自定义列、Foolter及单元格编辑
1:自定义列,包括 Group var head1Array = []; head1Array.push({ field: 'Id', title: 'xxxx', rowspan: 2 }); he ...
- index of rmvb mp3 rm突破站点入口下载
首先打开Google,在关键词输入框中输入"index of/"inurl:lib(双引號为英文状态下) ,选择“搜索中文简体网页”选项,回车搜索,得到了一些网页,不要以为这是一些 ...