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

从您的评论中澄清，您不希望执行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 2

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

Answer 3

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

Answer 4

正如您在评论中提到的，您希望针对特定条件停止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>

在父级触发点击事件，但阻止对子级

4 个答案: