Question

我试图让自己脱离jQuery（我的心在正确的地方，不是吗？），而且我很难找到相当于:not()选择器的东西

我有document.body.addEventListener("mousewheel", scrollTriggered)，除了特定的div（在小提琴中，＃someome）之外，我想要滚动任何东西。我尝试整合event.target，但无济于事。

任何帮助非常感谢。见JSFiddle

Answer 1

您可以检查事件是否来自您要避免的元素。为此，您必须从target遍历DOM树并比较每个Node的id属性，或使用Node.contains（尽管请先检查兼容性部分）：< / p>

var ignore = document.getElementById('something');

function scrollTriggered(event) {
    var target = event.target;
    if (target === ignore || ignore.contains(target)) {
        return;
    }
    // do other stuff
}

DEMO

尽管如此，Markasoftware's answer甚至更好，因为它首先阻止了事件。

Answer 2

最简单的方法可能是设置一个addEventListener，其中第三个参数为false执行操作，然后在要排除的元素上设置另一个addEventListener，第三个参数true，它将取消事件传播到另一个事件监听器。第三个参数有点复杂，但重要的是如果它设置为true，那么该侦听器将在任何false处理程序之前触发。正如@FelixKling所说，你实际上并不需要它true，但是当你需要一个处理程序在另一个处理器之前触发时，这是很好的做法，因为有时需要它。这是一个jsfiddle示例：http://jsfiddle.net/markasoftware/sBg3a/2/

document.body.addEventListener("mousewheel", scrollTriggered,false);

function scrollTriggered() {
    console.log('hi');
}

document.getElementById('something').addEventListener('mousewheel',function(e) {
    e.stopPropagation();
}, true);

尽管@ FelixKling的答案有效，但我个人认为这更优雅，通常使用这样的东西而不是其他方式。我只是喜欢你可以让主事件监听器只有监听器代码，所有取消事件传播的东西都可以完全分开，使它更加不引人注意

Answer 3

您可以检查事件处理程序中的目标元素，以及该目标元素是否返回false;

类似的东西：

function scrollTriggered (event) {
    if (event.target.id === "something") {
      // don't do anything
       return;
    } else {
       // do something  
    }
 }

Answer 4

您将在EcmaScript 6中使用下一个示例代码：

function scrollTriggered(event) {
    var target = event.target;
    if (target.outerHTML.includes('something')) { 
        return;
    }
    // do other stuff
}

我们从html元素中提取字符串，并尝试在其中找到一些东西。如果您将其放置在需要忽略的必要元素内，则可以使用此功能。

addEventListener除了一个元素之外的所有元素

4 个答案: