在父级上触发点击事件，但防止儿童点击事件

问题描述：

我有两个事件绑定到两个对象，一个在另一个内，具有相同的大小。我们称之为container和content。这两个事件都发挥着不同的作用。 content上的事件是默认设置的，因为我无法删除它，所以我需要一种方法来防止它（或暂时取消设置）。在父级上触发点击事件，但防止儿童点击事件

我想单击它们只有与container相关的事件被触发。是否可能。什么是最好的办法来实现它？

下面的例子。如果一切正常，单击白色方块应变成绿色，否则变成红色。

$(document).on('click', '#container', goGreen) 
 
$(document).on('click', '#content', goRed) 
 

 

 
function goGreen(event) 
 
{ 
 
    $('#content').addClass('green') 
 
    showClasses() 
 
    // Now stop!!! 
 
    // Don't run the click event on #content!!! 
 
} 
 

 
function goRed(event) 
 
{ 
 
    $('#content').addClass('red') 
 
    showClasses() 
 
} 
 

 
function showClasses() 
 
{ 
 
    $('#classes').html($('#content').attr('class')) 
 
}

#content { 
 
    display: inline-block; 
 
    width: 100px; 
 
    height: 100px; 
 
    border: 1px solid #000; 
 
    cursor: pointer; 
 
} 
 

 
.green { 
 
    background-color: lightgreen; 
 
} 
 

 
.red { 
 
    background-color: tomato; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="container"> 
 
    <a id="content"></a> 
 
</div> 
 

 
<p id="classes"></p>

使用'event.stopPropagation（）'来阻止事件冒泡到父母 – guradio

我想我正在寻找其他方法。阻止孩子直接进入父母。 –

如果我理解正确的话，这意味着''上content' click'处理器将永远不会触发。我对吗？ – abhishekkannojia

答

正如你在你想停止某些条件goRed方法注释中那么做到这一点自己的函数中。

if(event.target.id=='content') return; // Add your condition here and return.

取而代之的是event.target.id=='content'条件检查你的病情的，当你想它来执行。

UPDATE

您可以检查此条件$(this).parent().is('#container')检查，如果你的内容在里面container。

代码片段

$(document).on('click', '#container', goGreen) 
 
$(document).on('click', '.content', goRed) 
 

 

 
function goGreen(event) 
 
{ 
 
    $(this).find('.content').addClass('green') 
 
} 
 

 
function goRed(event) 
 
{ 
 
    if($(this).parent().is('#container')) return; // Add your condition here and return. 
 
    $(this).addClass('red') 
 
}

.content { 
 
    display: inline-block; 
 
    width: 100px; 
 
    height: 100px; 
 
    border: 1px solid #000; 
 
    cursor: pointer; 
 
} 
 

 
#container{ 
 
    display: inline-block; 
 
    padding: 3px; 
 
    border:2px solid red; 
 
} 
 

 
.green { 
 
    background-color: lightgreen; 
 
} 
 

 
.red { 
 
    background-color: tomato; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="container"> 
 
    <a class="content"></a> 
 
</div> 
 

 
<a class="content"></a>

我正在寻找*通过*内容，所以广场只获得了绿色的功能。 –

@ a.barbieri然后你不想点击任何内容？ –

什么时候你想点击内容被触发？ –

答

一种选择是使用CSS和应用上的内容pointer-events: none，但请记住，这将禁用该元素的所有指针事件。

答

由于澄清从你的意见，你不希望在content处理程序被执行，但你希望事件冒泡到父。在这种情况下，您可以停止content侦听器函数本身的事件处理。（虽然我觉得你不应该有content听众，因为在所有你不执行它）

$(document).on('click', '#container', goGreen) 
 
$(document).on('click', '#content', goRed) 
 

 

 
function goGreen(event) 
 
{ 
 
    $('#content').addClass('green') 
 
    showClasses() 
 
    // Now stop!!! 
 
    // Don't run the click event on #content!!! 
 
} 
 

 
function goRed(event) 
 
{ 
 
    if(event.target.id === 'content') 
 
    return; 
 
    $('#content').addClass('red') 
 
    showClasses() 
 
} 
 

 
function showClasses() 
 
{ 
 
    $('#classes').html($('#content').attr('class')) 
 
}

#content { 
 
    display: inline-block; 
 
    width: 100px; 
 
    height: 100px; 
 
    border: 1px solid #000; 
 
    cursor: pointer; 
 
} 
 

 
.green { 
 
    background-color: lightgreen; 
 
} 
 

 
.red { 
 
    background-color: tomato; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="container"> 
 
    <a id="content"></a> 
 
</div> 
 

 
<p id="classes"></p>

'content'上的监听器被设置在脚本的开头，这就是我需要阻止它的原因，如果存在'容器'被'容器'包装的情况。 “容器”上的事件只有在出现这种情况时才会设置。这就是为什么我有这个听众。 –

我不能接受两个答案，但我投了你的票。再次感谢 –

答

您应该使用event.stopPropagation()防止事件的进一步执行该被解雇。这里有一个工作演示可以帮助你：https://jsfiddle.net/uogt1tp7/

在父级上触发点击事件，但防止儿童点击事件

相关推荐