event.stopPropagation() 不起作用？

Question

I have implemented click event on window and on specific element. I want to stop window click event propagation on particular element click as mentioned below but it is not working. I am not sure what wrong I am doing here.

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

Answer 1

Apart from the typos, if your selects are not nested just do this

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

Please post your HTML since this works:

 $('.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>