ребенок и родитель запускают два разных события при нажатии на ребенка - PullRequest
Новая
       43

ребенок и родитель запускают два разных события при нажатии на ребенка

0 голосов
/ 08 декабря 2018

У меня есть эта HTML-структура: 

<div class="dropdownedit">
<div class="dropbtn">textxyz</div>
<div class="dropdown-content" style="display: none;">
<div href="#" class="ocond" id="text1">text1</div>
<div href="#" class="ocond" id="text2">text2</div>
<div href="#" class="ocond" id="text3">text3</div>
<div href="#" class="ocond" id="text4">text4</div>
</div></div>

и события jquery для обработки выпадающего списка / события скрытия: 

 $(document).on('click',".dropdownedit", function (e) {
$(this).children('.dropdown-content').css("display", "block");
     });

   $(document).on('mouseover',".dropdown-content", function (e) {
$(this).css("display", "block");
     });

   $(document).on('mouseout',".dropdown-content", function (e) {
$(this).css("display", "none");
   });

Более того, у меня есть событие нажатия длякласс "ocond", который должен закрывать класс раскрывающегося контента при щелчке по опции в раскрывающемся меню: 

$(this).parents('.dropdown-content').css("display", "none");

, но он не закрывается после того, как щелчок остается видимым.Я предполагаю, что это конфликтует с: 

$(document).on('click',".dropdownedit", function (e) {
$(this).children('.dropdown-content').css("display", "block");
     });

из-за того, что dropdownedit является родительским элементом для класса "ocond" и также запускается, когда кто-то нажимает на "ocond" класс.

Я пытаюсь добавить, чтобы предотвратить родительское событие при нажатии на дочернее событие: 

$(".dropdownedit .ocond").click(function(e) {
    e.stopPropagation();

});

, но безуспешно.Как я мог решить этот конфликт?

Ответы [ 2 ]

0 голосов
/ 08 декабря 2018

Я понял!... на тот случай, если кому-то интересно:

Я только что добавил e.stopPropagation ();после дочернего события (в данном случае после всех действий, связанных с повторным щелчком мыши), чтобы родитель не запустил событие.

0 голосов
/ 08 декабря 2018

Вы правы, команды конфликтуют друг с другом.Если вы перейдете на один уровень для события click, предназначенного для того, чтобы оставить меню открытым и добавить класс для переопределения функции hover show / hide, то вы получите желаемые результаты без конфликта.

Присоединение события .click() к .dropbtn и использование .nextAll() для поиска .dropdown-content позволит избежать текущего конфликта.

NB Я использовал .nextAll()который находит всех братьев и сестер, которые соответствуют определенному селектору, я следовал за этим с .first(), так что код влияет только на первый экземпляр этого.Это означает, что менее вероятно, что он помешает другому коду.

Я бы также настоятельно рекомендовал использовать .closest() (который обнаружит первое вхождение селектора сразу в восходящем направлении), а не .parents(), который будетсоответствует любому. 

$(".dropbtn").click( function() { 
  $(this).nextAll(".dropdown-content").first().show();
});

$(".dropdownedit").mouseleave( function() { 
  $(this).find(".dropdown-content").hide();
});

$(".ocond").click( function() { 
  $(this).closest('.dropdown-content').hide(); 
});
.dropdown-content {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="dropdownedit">
  <div class="dropbtn">textxyz</div>
  <div class="dropdown-content">
    <div href="#" class="ocond" id="text1">text1</div>
    <div href="#" class="ocond" id="text2">text2</div>
    <div href="#" class="ocond" id="text3">text3</div>
    <div href="#" class="ocond" id="text4">text4</div>
  </div>
</div>
...