Question

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

var _div = $('myselector');

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

在大多数情况下它工作正常，但在某些情况下失败了。失败的具体情况是目标div，其中包含阴影DOM：

当我点击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>

不同之处在于，在最后一个没有影子DOM，所以我认为jquery无法在里面找到带有伪元素的元素。有谁知道如何使 _div.find（event.target）返回一些好东西？

Answer 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对您有用。

希望我能正确理解你的问题。

不能在jquery.find div中使用伪元素

1 个答案: