Question

只是想知道为什么当我点击容器内部时，警告会弹出，尽管if语句不会在点击时显示。

另外我如何测试里面的孩子？

＆＃13;

$(window).on("click", function(event) {
  var container = $("#container");
  if ((event.target) !== container) {
    alert("clicked outside");
  }
});

＆＃13;

body {
  height: 600px;
}

#container {
  padding: 2rem;
  background: grey;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">

</div>

＆＃13;

干杯

Answer 1

您应该使用.is()

if($(event.target).is(container))

Answer 2

使用.is()函数将事件目标与JQuery元素进行比较：

$(window).on("click", function(event) {
  var container = $("#container");
  if ($(event.target).is(container)) {
    alert("clicked outside");
  }
});

body {
  height: 600px;
}

#container {
  padding: 2rem;
  background: grey;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">

</div>

Answer 3

比较id。这里$("#container")是一个jquery对象

$(window).on("click", function(event) {
  if ((event.target.id) !== 'container') {
    alert("clicked outside");
  }
});

body {
  height: 600px;
}

#container {
  padding: 2rem;
  background: grey;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">

</div>

Answer 4

您正在将DOM元素与永远不匹配的jQuery对象进行比较。从目标中创建一个jQuery对象，并检查它是否是#container的后代。如果您在#container下有子元素，这也适用。

<强> Updated fiddle

$(window).on("click", function(event) {
  if ($(event.target).closest('#container').length == 0){
    alert("clicked outside");
  }
});

Answer 5

试试这个：

$(window).on("click", function(event) {
var container = $("#container");
if ((event.target) !== container[0]) {
    alert("clicked outside");
}});

JQuery - 为什么event.target在这种情况下不起作用？

5 个答案: