触发父项的点击事件但阻止子项的点击事件

Question

我有两个事件绑定到两个对象，一个在另一个里面，大小相同。我们称它为 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>

Answer 1

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

Answer 2

正如您在评论中提到的，您想在某些情况下停止 goRed 方法，然后在您的函数中执行此操作。

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

而不是 event.target.id=='content' 条件检查，当您希望它执行时检查您的条件。

更新

您可以检查此条件 $(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>

Answer 3

正如您的评论所阐明的那样，您不希望 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>

Answer 4

您应该使用 event.stopPropagation() 来防止进一步执行已触发的事件。这是一个可以帮助您的工作演示：https://jsfiddle.net/uogt1tp7/

触发父项的点击事件但阻止子项的点击事件

Trigger click event on parent but prevent click event on children

javascript

jquery

event-handling

event-propagation