Javascript 从父div的子级禁用单击事件

我正在尝试将单击事件添加到具有类父级的

div

。现在在

div

中，我有一个

div

类的子类，它有自己的click事件

我如何才能禁用该子元素的父函数的单击事件，以便执行子元素本身的函数

我尝试过使用

指针事件：无但它似乎不起作用。为了更好地理解，我写了一篇JSFIDLE



$（文档）.on（'click'，'parent'，function（）{
var url=$（this.attr（“数据url”）
document.location.href=url
});

我是父母
我是个孩子，我不想去谷歌
您可以使用
stopPropagation（）
：

由于它在堆栈代码段中不起作用，这里有一个
仅供参考：
您只需在子单击事件中调用，以防止事件在DOM树中冒泡，防止任何父处理程序收到子单击事件的通知，如：


$（文档）.on（'click'，'parent'，function（）{
//var url=$（this.attr（“数据url”）
//document.location.href=url
log（'Parent Clicked'）；
});
$（文档）.on（'click'，'child'，函数（事件）{
event.stopPropagation（）；
console.clear（）；
log（'Child Clicked'）；
});
.parent{背景：#99c0c3；宽度：350px；高度：120px；位置：相对}
.child{背景：#ffde99；宽度：300px；高度：50%；位置：绝对；左侧：50%；顶部：50%；变换：平移（-50%，-50%）}

我是父母
我是个孩子，我不想去谷歌
只需添加这一行：


$（文档）.on（'click'，'parent'，函数（e）{
如果（e.target！==this）返回false；//添加了此行
var url=$（this.attr（“数据url”）
document.location.href=url
});

我是父母
我是个孩子，我不想去谷歌
您可以在“纯”JS中执行此操作


document.querySelector（'div.parent'）。onclick=evt=>
{
如果（！evt.target.matches（'div.parent'）返回//拒绝子元素，请单击
document.location.href=evt.target.dataset.url
}
div.parent{cursor:pointer}
div.child{cursor:default}

我是父母
我是个孩子，我不想去谷歌
我有一个带有类child的div，它有自己的click事件。
该示例没有显示如何/何时向孩子注册该click。我喜欢click事件的想法，我认为这种限制让我们都非常沮丧；）
防止事件冒泡到DOM树上
在这种情况下有点误导。由于此处使用的事件委派，这两个事件都是在document元素捕获的，因此DOM甚至已经冒泡到document元素。您应该避免使用
onclick
，尤其是在更大的代码库中。@t.niese onclick的优点是它拒绝在同一元素上使用其他addEventListener，从而避免在过于粗糙的代码中出现任何混乱。onclick既不能阻止使用
addEventListener
添加更多的侦听器，也不能覆盖任何已经存在的事件侦听器在
addEventListener
注册。它只会覆盖以前分配给
onclick
的事件侦听器，这就是任何真正的代码都有问题的原因。@t.niese您发现有问题的正是您自己项目中的一个有用约束，最终取决于您想如何解决问题，因为只有你才能处理bug和问题。但是对于其他人使用的或多人工作的大型项目，您应该遵循某些准则。
onclick
的唯一好处是从代码部分中的元素中删除一个侦听器，该元素不拥有或不知道该侦听器的任何内容，并且您不知道它为什么存在，或者如何以不同的方式删除它。如果是这种情况，那么代码中已经存在常规问题。
 $(document).on('click', '.parent', function () {
    var url = $(this).attr("data-url")
    document.location.href = url 
});
 $(document).on('click', '.child', function (e) {
 e.stopPropagation();
});