我在使用“指针事件”CSS 样式禁用鼠标事件时遇到了一个有趣的问题。
请引用fiddle .它有一个父级和两个子级 div,我将其中一个子级的“指针事件”设置为“无”。如果我点击那个 div,它的鼠标监听器不会被触发(这是预期的)但它的父 div 的鼠标事件会被触发。
$('#parent').click(function(){
console.log("Parent clicked");
});
如何在父 div 上禁用鼠标事件,如果我点击了其禁用鼠标事件的子项?
一种选择是在父点击上使用“if”条件进行过滤。但我不需要它,因为我想监听父级后面的“divs”上的鼠标事件。
请提供一些帮助:)
谢谢, 雷思那
最佳答案
我无法使指针事件按预期工作,因此我更改了 javascript 以实现您想要的。 我所做的是对 child2 的 event.stopPropagation,因此您可以单击他并仅触发他的点击事件,而不是他 parent 的点击事件。 顺便说一句,我对jquery知之甚少,所以我写了一个纯javascript和jquery的混合,希望有人能帮我翻译一下。
来了 fiddle
CSS:
child 1{
background-color:#ff0000;
width:100px;
height:100px;
pointer-events: all;
child 2{
background-color:#00ff00;
width:100px;
height:100px;
pointer-events: all;
parent {
pointer-events: none;
Javascript:
$(document).ready(function(){
document.getElementById('child1').addEventListener('click', function(){
console.log("child1 clicked");
}, false);
document.getElementById('child2').addEventListener('click', function(e){
e.stopImmediatePropagation();
console.log("child2 clicked");
}, false);
document.getElementById('parent').addEventListener('click', function(){
console.log("Parent clicked");
}, false);
});
关于javascript - 在 'div' 上禁用鼠标事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23261853/