Question

使用jQuery如何检测不是特定元素的点击，并因此执行操作？

我有以下JavaScript

$('#master').click(function() {
    $('#slave').toggle();
});

$(document).not('#master','#slave').click(function() {
    $('#slave').hide();
});

我无法在逻辑上看到我的错误。您可以看到实时示例here

Answer 1

由于您绑定了文档上的click事件，因此您可以使用event.target来获取启动该事件的元素：

$(document).click(function(event) {
    if (!$(event.target).is("#master, #slave")) {
        $("#slave").hide();
    }
});

编辑：正如Mattias在评论中正确指出的那样，上面的代码无法识别来自#master和#slave的后代的点击事件（如果有的话））。在这种情况下，您可以使用closest()检查事件的目标：

$(document).click(function(event) {
    if (!$(event.target).closest("#master, #slave").length) {
        $("#slave").hide();
    }
});

Answer 2

此代码是否符合您的要求？（不完全确定我是否理解正确）

$('body').on('click', '*:not( #master, #slave )', function() {
    $('#slave').hide();
});

http://jsfiddle.net/gZ4Hz/8/

Answer 3

jQuery本身支持事件委托。困难在于创建适当的选择器。最初使用delegate，但最近应使用on的委托形式。

事件委托的目的是监听子元素上的事件，并在这些元素上调用绑定事件处理程序，就像它们已绑定到子元素而不是父元素一样。这意味着，不是将处理程序绑定到 DOM中的每个元素，而是将处理程序绑定到初始选择中的每个元素（document是单个元素）。这也使得使用单个选择器绑定到不断变化的元素集的简单方法，因为新元素将它们的事件传播到document，无论它们是否在绑定初始事件处理程序时存在：

$(document).on('click', '*:not(#master, #master *, #slave, #slave *)', function (e) {
    //this will reference the clicked element
});

此外，请注意，我不仅说元素不能是#master或#slave，它们一定不能是#master或{{1}的孩子或者。

Answer 4

另一个想法是，它可能无法正常工作，因为您的浏览器可能无法在100％高度呈现body;尝试调整基础css以修复身体高度，然后再考虑其他一些想法。

e.stopPropagation()：阻止事件冒泡DOM树，防止任何父处理程序收到事件通知。

因此，如果您将首次点击代码更改为以下内容：

$('#master').click(function(e) {
    e.stopPropagation();
    $('#slave').toggle();
});

然后你也可以改变第二个的呼号：

$("body, body *").not('#master, #slave').click(function(e) {
    $('#slave').hide();
});

这应该涵盖它。试试看！或参见this jsFiddle

Answer 5

Fredrik的答案适用于文档中已存在的元素，但它不适用于由ajax调用提取的元素。我尝试了以下内容，它适用于我。共享未来ajax程序员的代码。

    $(document).on('click',function(event) {
        if (!$(event.target).closest("#selector").length) {
            if ($('#selector').is(":visible"))
                $('#selector').slideUp();
        }
    });

会将其作为评论发布，但我没有足够的声誉。

Answer 6

$('.clickable-row').on("click",function(){
  window.location = $(this).data('href');
  return false;
});
$("td > a").on("click",function(e){
  e.stopPropagation();
});

或

jQuery(document).ready(function($) {
    $('.clickable-row').on("click",function(){
      window.location = $(this).data('href');
      return false;
    });
    $("td > a").on("click",function(e){
        e.stopPropagation();
    });
});

文档点击不在元素jQuery中

6 个答案: