无法使用包含伪元素的jquery.find div

我试图检测单击是否指向特定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元素中，但是_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>

供给者
瓦利德

---

不同之处在于，在最后一个版本中没有影子DOM，因此我认为jquery无法找到包含伪元素的元素。有人知道如何使_div.find（event.target）返回一些好的东西吗？

如果您想要一个为每个div触发的事件处理程序，我建议使用而不是绑定，因为您可以选择处理程序应该触发哪些元素。如果您正在动态地将div添加到文档中，这甚至可以起作用。大概是这样的：

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

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");
    }
});

$（文档）。在（'click touchstart'，div'，函数（事件）{
警报（“单击的”+$（event.target）.closest（“div”）.attr（“id”）；
});

这里有一个例子来说明这一点

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

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

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");
    }
});

看

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

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

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）。看,

在每种情况下，我都这样认为，并将对你有用

希望我正确理解了你的问题