不能使用带有伪元素的 jquery.find div答案

【问题标题】：Cannot use jquery.find div with pseudo-element inside不能使用带有伪元素的 jquery.find div
【发布时间】：2015-06-24 03:53:42
【问题描述】：

我正在尝试检测点击是否指向特定 div 之外。为此，我将单击事件绑定到整个文档并测试目标是否是我的 div 的子项，如下所示：

var _div = $('myselector');

document.bind('click touchstart', function (event) {
    if (_div.find(event.target).length === 0) {
        callback();
    }
});

它在大多数情况下都可以正常工作，但在某些情况下会失败。失败的具体情况是内部带有影子 DOM 的目标 div：

当我点击 div 内的某个区域时，我有这个 event.target ：

<div class="row btnActions">
::before
        <a class="link pull-left ng-binding" style="" ng-click="deleteAllFilters()">
           Supprimer
        </a>
        <button type="button" class="btn btn-primary btn-sm pull-right ng-binding" ng-click="validate()">
            Valider
        </button>
::after
    </div>

这实际上在我的 _div 元素内，但是 _div.find(event.target) 返回空数组，当我尝试请求 _div 时。 find('.btnActions') 它返回给我这个：

<div class="row btnActions">
        <a class="link pull-left ng-binding" style="" ng-click="deleteAllFilters()">
           Supprimer
        </a>
        <button type="button" class="btn btn-primary btn-sm pull-right ng-binding" ng-click="validate()">
            Valider
        </button>
    </div>

不同的是最后没有shadow DOM，所以我认为jquery找不到里面有伪元素的元素。有谁知道如何让 _div.find(event.target) 返回好的东西？

【问题讨论】：

标签： jquery html jquery-selectors pseudo-element shadow-dom

【解决方案1】：

如果您想要为每个 div 触发事件处理程序，我建议使用 jQuerys "on" 而不是 bind，因为您可以选择处理程序应该触发的元素。如果您将 div 动态添加到文档中，这甚至可以工作。像这样的：

$(document).on('click touchstart', "div", function (event) {
    alert("Clicked " + $(event.target).closest("div").attr("id"));
});

这里有一个 JSFiddle 来证明这一点。

如果您仍想跟踪文档上的所有点击，并希望在处理程序内部确定点击是在文档上还是在某个 div 内，您可以使用如下内容：

$(document).on('click touchstart', function (event) {
    var div = $(event.target).closest("div");
    if (div.length > 0) {
        alert("Inside Div");   
    } else {
        alert("Outside Div");
    }
});

见this JSFiddle。

如果您仍想事先定义选择器（如您的示例），您可以执行以下操作：

var _div = $("#div1");

$(document).on('click touchstart', function (event) {
    var target = $(event.target);

    if (_div.has(target).length || _div.is(target)) {
        alert("Inside Div1");   
    } else {
        alert("Outside Div1");
    }
});

在这种情况下，您需要检查单击是发生在选择器的子项上还是选择器本身（以防有人直接单击 div）。见here，

在每种情况下，我都认为jQuerys "closest" API 和this SO question 对你有用。

希望我正确理解了您的问题。

【讨论】：