child 和 parent 在单击 child 时触发两个不同的事件

Question

我有这个 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 事件来处理下拉 view/hide 事件：

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

此外，我有一个 class "ocond" 的 on-click-event，当在下拉菜单中单击一个选项时，它应该关闭 dropdown-content class：

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

但点击后它并没有关闭，它仍然可见。我猜它与以下内容冲突：

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

由于 dropdownedit 是 "ocond"-class div 的 parent，并且当有人点击 "ocond" class.

我尝试添加以防止在单击 child 事件时出现 parent 事件：

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

});

但没有成功。我该如何解决这个冲突？

Answer 1

你是对的，命令相互冲突。如果您为 click 事件降低一级，该事件旨在使菜单保持打开状态并添加 class 以覆盖 hover show/hide 功能，那么您将获得结果你想要没有冲突。

将 .click() 事件附加到 .dropbtn 并使用 .nextAll() 查找 .dropdown-content 将避免当前冲突。

N.B. 我用 .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>

Answer 2

我明白了！ ...以防万一有人感兴趣：

我刚刚添加了 e.stopPropagation();在子事件之后（在本例中是在所有 ocond click 事件操作之后）以防止父事件触发事件。

child 和 parent 在单击 child 时触发两个不同的事件

child and parent fire two different events when clicked on a child

jquery

children

parent