javascript - 防止目标事件及其父事件

Question

我有这段代码，我用它从每个具有这个类名的元素中删除一个类名“joker”:http://jsfiddle.net/ffz30knn/1/

是否有可能(仅使用 vanilla JS)在目标元素及其父元素上阻止此事件，所以当我单击 <span class="joker">one</span> 时在里面 <div class="joker"></div>它将从具有此类的其他元素中删除“joker”类，但不会从该 span 元素中删除它包装的 div？

谢谢。

这是当前代码:

function removeClass(classToRemove) {
  var elems = document.getElementsByClassName(classToRemove);
  console.log(elems.length);
  if (!elems) return;
  for (var i = elems.length - 1; i >= 0; i--) {
    var elem = elems[i];
    elem.className = elem.className.replace(/(?:^|\s)joker(?!\S)/g, '');
  }
}
window.onload = function() {
  document.onclick = function() {
    removeClass("joker");
  };
};

div {
  background: silver;
  padding: 3px 8px;
  margin: 5px;
}
span {
  background: blue;
  padding: 3px 8px;
  color: white;
}
.joker {
  background: black;
  color: red;
}

<div class="one two three joker"><span class="joker">one</span>
</div>
<div class="one two three"><span>two</span>
</div>
<div class="one two three joker"><span class="joker">three</span>
</div>
<div class="one two three"><span>four</span>
</div>

Answer 1

如果我知道你想从除你点击的元素之外的每个元素中删除类 joker？

在你的 removeClass 函数中你可以检查它是否是同一个元素

function removeClass(classToRemove) {
  var elems = document.getElementsByClassName(classToRemove);
  console.log(elems.length);
  if (!elems) return;
  for (var i = elems.length - 1; i >= 0; i--) {
    var elem = elems[i];
    if(elem != this)
        elem.className = elem.className.replace(/(?:^|\s)joker(?!\S)/g, '');
   }
}

而且我猜你可以通过执行 Element.parentElement 检查父元素，这样你会:

if(elem != this && elem != this.parentElement)