Question

我有一个 JS 全局事件处理程序，看起来像这样（这是临时代码）：

$(document).on('click', '.my-class, #box-in-my-class', function(e) {
  console.log($(this), 'was clicked!');
  if ($(this).is('my-class')) {
    $(this).children('.dropdown').toggleClass('active');
  }

  if ($(this).is('#box-in-my-class')) {
    $('#expander').toggleClass('active');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="my-class">
  <div class="other-bit"></div>
  <div class="dropdown">
    <div id="box-in-my-class"></div>
  </div>
</div>
<div id="expander"></div>

（添加的.active类使div更大 - 通过css）。

但是，在运行此功能时，当我点击#box-in-my-class时，我会在console中看到此内容：

#box-in-my-class was clicked!

.my-class was clicked!

切换下拉列表（关闭它）。

如何设置它以便在单击元素的子元素时不会冒泡/传播/ etc。这样我就可以点击#box-in-my-class w / o运行.my-class

Answer 1

因为你的活动泡沫了。在代码中，您必须调用e.stopPropagation();而且你还有一些错过')'。

＆＃13;

$(document).on('click', '.my-class, #box-in-my-class', function(e) {
  e.stopPropagation();
  console.log(e.target, 'was clicked!');
  if ($(this).is('my-class')) {
    $(this).children('.dropdown').toggleClass('active');
  }

  if ($(this).is('#box-in-my-class')) {
    $('#expander').toggleClass('active');
  }
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="my-class">
  <div class="other-bit"></div>
  <div class="dropdown">
    <div id="box-in-my-class">Test 1</div>
  </div>
</div>
<div id="expander">Test 2</div>

＆＃13;

有关详情，请参阅event bubbling

和e.stopPropagation()

Answer 2

尝试以下

$(document).on('click', '.my-class, #box-in-my-class', function(e) {

  if ($(this).is('.my-class') && $(e.target).is(':not(#box-in-my-class')) {//check if the clicked element is not box-in-my-class
    console.log($(this), 'was clicked!');
    $(this).children('.dropdown').toggleClass('active');
  }

  if ($(this).is('#box-in-my-class')) {
    $('#expander').toggleClass('active');
  }
}

演示：http://jsfiddle.net/0yvuzm0c/

Answer 3

我认为如果只需要一个回复，你就不应该使用2个。

如果我是你，我会像这样编写我的JS函数：

if ($(this).is('#box-in-my-class') {
    $('#expander').toggleClass('active');
    return;
}else if ($(this).is('my-class') {
    $(this).children('.dropdown').toggleClass('active');
    return;
}

我会先检查这个$（＆＃39;＃box-in-class-class＆＃39;），原因是$（＆＃39;＃box-in-my-class＆＃39;）是$（。＆＃39; my-class＆＃39;）的孩子。在这种情况下，如果检测到$（＆＃39;＃box-in-my-class＆＃39;）被点击，它将停止循环。而不是检查$（。＆＃39; my-class＆＃39;）。

你可以学习http://www.w3schools.com/js/js_if_else.asp以便更熟悉if，否则，if if else。

JS / jQuery - 停止.on（'click'）发送两次

3 个答案: