Question

在我的HTML中

$(document).click(function(){
    alert('Document Clicked');
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
    <button type='button'>CLICK [NO ALERT]</button>
    <button type='button'>ME[NO ALERT]</button>
</body>

在我的代码中，如果单击按钮，如何阻止警报显示，但除了按钮之外的任何内容都可以被警告。

Answer 1

您可以在该特定click上添加另一个<button>侦听器，并停止该事件的传播：

$(document).click(function(){
  alert('Document Clicked');
})
$('.not-clickable').click(function(e) {
  e.stopPropagation();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
    <button type='button'>CLICK [NO ALERT]</button>
    <button type='button' class="not-clickable">ME[NO ALERT]</button>
</body>

另一个选项是检查点击的元素是否是该特定按钮：

$(document).click(function(e){
  if (e.target.classList.contains('not-clickable')) {
    return;
  }
  alert('Document Clicked');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
    <button type='button'>CLICK [NO ALERT]</button>
    <button type='button' class="not-clickable">ME[NO ALERT]</button>
</body>

Answer 2

试试吧

＆＃13;

$("#SomeElementId").click(function(e) {
   //do something
   e.stopPropagation();
})

＆＃13;

Answer 3

试试<button type='button' onclick="event.stopPropagation()">CLICK [NO ALERT]</button>。默认情况下，单击事件会触发到父元素，但event.stopPropagation（）会将其保留为事件的元素原点。

单击文档而不是特定元素警报

3 个答案: