javascript - event.stopPropagation() 不工作？

Question

我已经在窗口和特定元素上实现了点击事件。我想停止对特定元素单击的窗口单击事件传播，如下所述，但它不起作用。我不确定我在这里做错了什么。

$('.dropdown-container').click(function(event){
  event.stopPropagation()
  var selectElement = '.dropdown-container > select';
  if($(selectElement).hasClass('actionDD')){
    $(selectElement+'.actionDD').toggleClass('special');
  }
  else if($(selectElement).hasClass('countryDD')) {
    $(selectElement+'.countryDD').toggleClass('special');
  }
  $('.fa-chevron-down.importC, .fa-chevron-down.exportC ').removeClass('special');
});
      
$(window).click(function(event){
  console.log('window event clicked');
  $('.dropdown-container, .fa-chevron-down.importC, .fa-chevron-down.exportC').removeClass('special');
});

标签： javascriptjquery

Answer 1

除了拼写错误，如果您的选择没有嵌套，请执行此操作

$('.dropdown-container').on("click", "select", function(e){
  e.stopPropagation()

  if($(this).is('.actionDD') || $(this).is('.countryDD')) { 
    $(this).toggleClass('special');
  }
  $('.fa-chevron-down.importC, .fa-chevron-down.exportC ').removeClass('special');
});
      
$(window).on("click", function(e){
  console.log('window event clicked');
  $('.dropdown-container, .fa-chevron-down.importC, .fa-chevron-down.exportC').removeClass('special');
});

请发布您的 HTML，因为这有效：

$('.dropdown-container').on("click", "select", function(e) {
  e.stopPropagation()
  if ($(this).is('.actionDD') || $(this).is('.countryDD')) {
    $(this).toggleClass('special');
  }
});

$(window).on("click", function(e) {
  console.log('window event clicked');
});

.special {
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dropdown-container">
  <select class="actionDD">
    <option>Click</option>
  </select>
</div>