Блог

Я реализовал событие щелчка в окне и на определенном элементе. Я хочу остановить распространение события щелчка окна по конкретному элементу щелчка, как указано ниже, но это не работает. Я не уверен, что делаю здесь что-то не так.

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

Помимо опечаток, если ваши выборки не вложены, просто сделайте это

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