Question

通常当我想检查父元素中是否有任何子元素被点击时，我会使用以下内容：

$(document).click(function (e) {
    alert($(e.target).is("#somediv *"));
}

但现在我在变量中有somediv。我试过了：

var somediv = $(this);
$(document).click(function (e) {
    alert($(e.target).is($(somediv, "*")));
}

但它不起作用。我怎样才能做到这一点？它是检测元素或任何子元素是否被单击的最佳方法吗？

Answer 1

无论somediv是DOM元素还是选择器，都要使用.closest ^[docs]：

if ($(e.target).closest(somediv).length > 0)

这将从e.target开始遍历DOM并测试任何祖先（或元素本身）是否为somediv。如果要排除e.target，请从其父级开始：

$(e.target).parent().closest(somediv)

另一种方式，取决于整体上下文，可以简单地将事件处理程序绑定到somediv：

somediv.click(function() {
   // click originated from inside the div
});

没有简单的方法可以从现有DOM元素创建选择器。如果somediv包含选择器，那么您可以使用字符串连接来组合它：

$(e.target).is(somediv + ' *');

Answer 2

尝试以下，

DEMO： http://jsfiddle.net/GUAFW/2/

$(function () {
    var somediv = $('#container');
    $(document).click(function (e) {
        alert($(e.target).parent().is(somediv));
        //                   ^__ Just immediate childrens :(
    });
});

您可以在处理程序中执行e.target != this以检查它是父元素还是子元素。

示例：

<强> HTML：

<div id="container">
   <div class="child"></div><div class="child">
</div>

<强> JS：

$(function () {
    $('#container').click(function (e) {
        alert(e.target != this);
    });
});

Answer 3

假设someDiv具有元素的字符串文字标识符，则不会以#为前缀，因此：

$(document).click(function (e) {
  if ($(e.target).is("#" + somediv + " *")) {
    // some code
  } 
}

Answer 4

尝试这种方法..而不是.is（）尝试使用相等选择器..

<div  class="hide"> 
    <span class="green" id="somediv"> YOOO </span>
</div>

$('div').click(function(e) {
    if (e.target != this) {
        alert(((e.target.id) == 'somediv'));
    }
});

CHECK FIDDLE

选择器使用变量

4 个答案: