jQuery如何阻止子元素继承父元素事件?
2024-10-14 12:41:18
<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>
最新文章
- 信息安全比赛总结(21ic转帖)
- 基于ZK构建统一配置中心的方案和实践
- C#连接数据库的新方法(通过web.config配置文件)
- Java中类型的长度
- Facebook 调试工具Stetho配置入门
- iOS:原生二维码扫描
- 1.0.x-学习Opencv与MFC混合编程之---视频运动检测
- WEB安全实战(一)SQL盲注
- 自学 iOS - 三十天三十个 Swift 项目 第一天
- js应用之实现图片切换效果
- 1057. Stack (30) - 树状数组
- Spring Security(四):2.1 Introduction What is Spring Security?
- 编译和运行dubbo-admin管理平台
- VMware 虚拟机 Ubuntu 系统执行 ifconfig 命令 eth0没有IP地址(intet addr、Bcast、Mask) 解决:UP BROADCAST MULTICAST 问题
- 转:关于S参数的一些理解
- 远程链接 aws Windows Server 2016 Base Nano
- java-Set集合、HashSet集合、LinkedHashSet集合和TreeSet集合
- 快速定位 Android APP 当前页面的三种方法(Activity / Fragment)
- smarty直接在模板中格式化时间的方法
- spring boot 输入参数统一校验
热门文章
- Tsinsen A1517. 动态树 树链剖分,线段树,子树操作
- CosCos2D-android 代码总结
- ASP.Net IE10 _doPostBack 未定义错误【转】
- 8-18-Exercise
- 【转】基于RMAN实现坏块介质恢复(blockrecover)
- HDU P4578 Transformation
- RH442之Tuned优化方案
- 1514:数值的整数次方 @jobdu
- 网络爬虫之Windows环境Heritrix3.0配置指南
- C# .Net基础知识点解答