阻止目标事件，它是父事件

Question

我有以下代码，用于从具有该类名的每个元素中删除一个类名“小丑”： http : //jsfiddle.net/ffz30knn/1/

是否有可能（仅适用于Vanilla JS）防止在目标元素及其父元素上发生此事件，所以当我单击<div class="joker"></div> <span class="joker">one</span> ， <div class="joker"></div>会从具有此类的其他元素中删除“小丑”类，但不会从此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)

Answer 2

您可以通过onclick事件获取单击的元素：

window.onload=function() {
    document.onclick=function(event) {
        removeClass(event.target, "joker");
    };
};

将其传递给您的功能，您应该能够实现所需的功能。

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

这是更新的小提琴