Question

我在jQuery中有这个：

$(document).bind("click touchstart", function(e) {
if (e.target.class != searchControls && !searchControls.find(e.target).length) {
 //do something
});
});

这样做是检查点击，如果搜索元素不是该元素的子元素，那么我可以运行一些东西。我想要做的就是找到一种纯粹的JavaScript替代方案。

到目前为止，我有：

var searchTrigger = document.querySelector(".header__search-btn"),
    productSearch = document.querySelector(".product-search"),
    searchControls = document.querySelectorAll(".product-search__positioner");

document.onclick = function (e) {
 if (e.target.class != searchControls && e.parentNode != searchControls)
   // do something
 }
}

然而，这仍然会在if声明中激发我的功能，所以显然我错了 - 不确定错误。帮助赞赏。

Answer 1

document.querySelectorAll会返回DOM元素的集合。 e.target.class != searchControls没有意义（忽略target.class甚至不存在）：假设您的意思是className，您试图将字符串与DOM元素列表。这将永远是false。

因此，请忽略该部分并查看e.parentNode != searchControls。事件对象没有属性parentNode。同样，即使您的意思是e.target.parentNode，也没有多大意义，因为您正在测试单个元素是否与元素列表相同。

根据您对.find的使用，您基本上想知道某个节点是否包含在另一个节点中。每个DOM节点都有一个方法.contains，所以你要做的就是遍历DOM元素集合并调用该方法：

var contained = false;
for (var i = 0; i < searchControls.length; i++) {
    if (searchControls[i].contains(e.target)) {
        contained = true;
        break;
    }
}

这很容易转移到自己的可重用功能中。

Answer 2

没有e.target.class。如果要检查类名，那么它应该是

e.target.className

然后检查父元素类名

 e.target.parentNode.className

如果您要在父节点内搜索，请使用

e.target.parentNode.querySelector("pass your selector here")

如果您只想搜索子元素：

e.target.querySelector("pass your selector here")

纯JavaScript替代jQuerys .find

2 个答案: