JS / jQuery-停止.on（'click'）發送兩次

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!

切換下拉菜單（將其關閉）。

如何設置它，以便在單擊元素的子元素時不會冒泡/傳播/等。 這樣我就可以單擊沒有運行.my-class的#box-in-my-class .my-class

Answer 1

因為您的事件冒泡。 在代碼中，您必須調用e.stopPropagation() ； 而且您還錯過了')' 。

 $(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'); } }) 

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

有關更多信息，請參閱事件冒泡

和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 if class。

如果我是你，我會這樣寫我的JS函數：

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

由於$（'＃box-in-my-class'）是$（。'my-class'）的子代，我將首先檢查此$（'＃box-in-my-class'）。 在這種情況下，如果檢測到單擊了$（'＃box-in-my-class'），它將停止循環。 而不是也檢查$（。'my-class'）。

您可以學習http://www.w3schools.com/js/js_if_else.asp ，以更熟悉if，else，if，if循環。