不能使用内部伪元素的jquery.find div

问题描述：

我试图检测点击是否在特定div之外。对于这一点，我将绑定单击事件整个文档和测试，如果目标是我的div的孩子，像这样：不能使用内部伪元素的jquery.find 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）返回一些好东西吗？

答

如果你想有一个事件处理程序为你的每个div触发，我建议使用jQuerys "on"而不是绑定，因为你可以选择处理程序应该触发哪些元素。这甚至适用于动态添加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"); 
    } 
});

在这种情况下，你需要检查，如果点击happend到你选择的子或者是选择器本身（以防有人直接点击div）。请参阅here，

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

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

不能使用内部伪元素的jquery.find div

相关推荐