Question

我试图转移到使用普通的旧Javascript（由于速度问题而离开jQuery）。我需要在某些东西上触发click事件，然后在main元素上切换一个类。这就是我所拥有的：

document.querySelector('.wrapper-dropdown').addEventListener("click", function(event) {
   event.target.classList.toggle("active");
});

https://jsfiddle.net/h12o073L/17/

我遇到的问题是，我只想要主要元素添加课程 - 而不是孩子！目前，如果我点击其中一个价格，就会获得 .active 类（而我希望.wrapper-dropdown元素添加该类）

我必须承认 - 我对jQuery变得非常懒惰，所以我可能会错过一些简单的东西;）

Answer 1

您希望.active类仅添加到.wrapper-dropdown您可以使用currentTarget这将始终引用您附加事件处理程序的元素。

document.querySelector('.wrapper-dropdown').addEventListener("click", function(event) {
   event.currentTarget.classList.toggle("active");
});

Answer 2

您应该使用.closest()功能选择目标Element.closest()。

null方法返回最接近的祖先当前元素（或当前元素本身）匹配参数中给出的选择器。如果没有这样的祖先，那就是返回document.querySelector('.wrapper-dropdown').addEventListener("click", function(event) { event.target.closest('.wrapper-dropdown').classList.toggle("active"); });。

document.querySelector('.wrapper-dropdown').addEventListener("click", function(event) {
  event.target.closest('.wrapper-dropdown').classList.toggle("active");
});

＆＃13;

<div id="dd-price-from" class="wrapper-dropdown" tabindex="1">
  <span>Price From</span>
  <ul class="dropdown">
    <li data-what="20"><a href="#">€20</a></li>
    <li data-what="50"><a href="#">€50</a></li>
  </ul>
</div>

＆＃13;

first_extrusion = vtkLinearExtrusionFilter()
# set parameters ....
first_extrusion.Update()

second_extrusion = vtkLinearExtrusionFilter()
second_extrusion.SetInputData( first_extrusion.GetOutput() )
# set other parameters ...

＆＃13;

Javascript单击监听器，但不会触发子元素？

2 个答案: