Question

我正在构建一个概念jQuery Page Builder / Prototype。我正在使用jQuery 3.x，在选择父元素的子元素时遇到了一些困难。我正在使用jQuery Draggable＆Droppable，但是这些可能不是造成问题的原因，因此，我只会显示一段代码，这很简单：

html

<h2>Parent Element <span>Child Element / Could be anything</span></h2>

jQuery

$('#stage *').click(function() {
  $('#stage *').removeClass('js__widget-selected');
  $(this).addClass('js__widget-selected');
});

从我上面编写的代码中，我基本上是在单击的元素中添加一个类（添加的类纯粹是出于样式目的，以添加绿色边框。）

当我尝试单击父元素（在本例中为span）中的任何HTML标记/元素子元素（<h2>）时出现问题。

子元素可以是任何东西。

我得到的结果：

使用此特定代码，当我尝试选择<span>或任何元素时，实际上是在将该类添加到父级而不是子级。我想知道这是否与通配符选择器有关？

任何指导将不胜感激！非常感谢！

Answer 1

单击子项时，单击事件首先在子项上发生，然后在父项上发生，然后在其父项上发生等等。因此，具有相同单击事件处理程序的最后祖先将成为显示的被选择项。这是理解行为的相关参考： https://javascript.info/bubbling-and-capturing

处理完之后，您需要调用event.stopPropagation()（将event作为参数添加到您的点击处理程序函数中），以防止它冒泡到父级。

$('#stage *').click(function(event) {
  $('#stage *').removeClass('js__widget-selected');
  $(this).addClass('js__widget-selected');
  event.stopPropagation();
});

.js__widget-selected {
   border: green 2px solid
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="stage">
<h2>Parent Element <span>Child Element / Could be anything</span></h2>
</div>

jQuery试图选择父元素的子元素

1 个答案: