如何防止在单击子元素时触发单击处理程序
How do I prevent a click handler being triggered when a child element is clicked?
我有两个div标签,第一个div是父亲,第二个div是儿子像这个一样在父亲内部
<div id="father">
<div id="son"> </div>
</div>
我在div father中添加了一个事件(onclick),就像这个一样
<div id="father" onclick="closeFather()">
<div id="son"> </div>
</div>
我的问题是为什么儿子在事件中继承父亲。
我希望当我点击Fatherdiv时实现事件,但当我点击son时没有实现任何东西,因为它没有任何事件。
这是由一种名为事件冒泡的JavaScript特性引起的。默认情况下,您的事件将"冒泡"到DOM中。
单击子节点时,会自动触发其父节点的单击事件。
默认情况下,当单击一个元素时,气泡从内向外发生:这意味着首先触发子元素的click()
事件,然后触发其父元素,等等。
您可以解决问题,方法是在子元素中添加一个二次点击处理程序,并告诉浏览器以跨浏览器兼容的方式停止冒泡(请参阅实际示例):
<script language="javascript">
function parentHandler(e) {
alert('parent clicked');
};
function childHandler(e) {
if (!e) var e = window.event;
e.cancelBubble = true;
if (e.stopPropagation) e.stopPropagation();
alert('child clicked');
};
</script>
<div id="parent" onclick="parentHandler(event);">
Foo
<div id="child" onclick="childHandler(event)">
Bar
</div>
</div>
您可以将事件作为closeFather
函数中的参数之一传递,然后检查事件目标是否为父元素。参见此示例
function closeFather(e) {
if(e.target == document.getElementById('father')) {
//do stuff
}
};
然后在HTML中,您只需要将事件参数添加到javascript函数中。
<div id="father" onclick="closeFather(event)">
<div id="son"></div>
</div>
这是一个冒泡事件。DOM事件的核心部分。如果事件是由son
触发的,您可以return false
并防止处理程序(closeFather
,但您应该将事件传递给它)中冒泡。
使用CSS禁用事件!
.parent-element .element{
pointer-events: none;
}
当设置为";none";允许元素不接收悬停/单击事件,相反,该事件将发生在它后面的任何东西上。
https://caniuse.com/?search=pointer-事件
奇怪的是,我通过在子元素上调用:event.prventDefault()和event.stopPropagation()来解决同样的问题,冒泡行为消失了!。希望能有所帮助。
- 将参数传递给reactjs单击处理程序
- 元素单击处理程序由一个神秘的函数取消设置
- 将单击处理程序附加到动态生成的锚标记
- 为什么在模糊事件处理程序中添加setTimeout会修复“;掩蔽”;另一个单击处理程序的
- 使用运行时创建的链接来触发ASP.Net中隐藏按钮的单击处理程序
- 将单击处理程序绑定到动态元素
- 在另一个C#按钮单击处理程序之前,从OnClientClick函数调用C#按钮处理程序
- 如何通过单击处理程序进行导航
- 触摸事件处理程序将覆盖单击处理程序
- 将单击处理程序设置为动态创建的按钮
- 插入内容后,Iframe 中的单击处理程序不起作用
- OL3 是否有单击处理程序像素容差设置
- 将单击处理程序绑定到除特定 HTML 标记之外的所有元素
- 在 vis 中访问节点数据.js单击处理程序
- 在 Javascript 中启用/禁用按钮单击处理程序
- 如何在单击处理程序中使用反应路由器 1.0.x 进行客户端路由
- 为什么列表视图单击处理程序在启动时执行函数
- 来自 setTimeout 的 Jquery 单击处理程序
- 更改 jQuery 单击处理程序功能
- 使用单击处理程序时出现“系统未定义”JavaScript 错误