javascript - 触发父级的点击事件但阻止子级的点击事件

Question

我有两个事件绑定(bind)到两个对象，一个在另一个对象内，并且大小相同。我们将其称为容器和内容。这两个事件都指向不同的函数。 content 上的事件是默认设置的，由于我无法删除它，所以我需要一种方法来阻止它(或暂时取消设置它)。

我希望点击它们时仅触发与容器相关的事件。可能还是不可能。实现这一目标的最佳方式是什么？

下面是示例。如果一切正常，单击白色方 block 应变为绿色，否则变为红色。

$(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

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