Question

这是我的代码：

$(document).click(function(e){
  if( $(e.target).closest("#myid").length > 0 ) {
    return false;
  }
  alert('clicked');
});

#myid{
  border: 1px solid;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <div id="myid">
    something <br>
    <a target="_blank" href="#">link</a>
    <p>paragraph</p>
  </div>
</div>

如您所见，当您点击div#myid元素时，系统会显示一条提醒。我希望当您点击link时也会显示该警报。我怎么能这样做？

Answer 1

要执行此操作，您可以为if添加另一个条件，该条件会排除a元素中的#myid元素。试试这个：

＆＃13;

$(document).click(function(e) {
  var $target = $(e.target);
  if ($target.closest("#myid").length > 0 && $target.is(':not(a)')) {
    return false;
  }
  alert('clicked');
});

＆＃13;

#myid {
  border: 1px solid;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <div id="myid">
    something <br>
    <a target="_blank" href="#">link</a>
    <p>paragraph</p>
  </div>
</div>

＆＃13;

Answer 2

我添加了另一张支票，如下所示：

 if( $(e.target).closest("#myid").length > 0 && $(e.target).attr("id") !=="linkID")

将ID属性添加到您的链接：

<a target="_blank" id="linkID" href="#">link</a>

请看小提琴。工作正常

$(document).click(function(e){
  if( $(e.target).closest("#myid").length > 0 && $(e.target).attr("id") !=="linkID") {
    return false;
  }
  alert('clicked');
});

#myid{
  border: 1px solid;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <div id="myid">
    something <br>
    <a target="_blank" id="linkID" href="#">link</a>
    <p>paragraph</p>
  </div>
</div>

Answer 3

您需要获取所点击的当前目标。在这种情况下，您需要先区分当前目标（它将是锚点）。

您可以使用.is() jQuery method告诉您点击了哪个元素。例如：

$(document).click(function(e) {
  if($(e.target).is("a")){
    alert("You clicked the anchor");
    e.stopPropagation();
    return;
  }

  if ($(e.target).closest("#myid").length > 0) {
    return false;
  }

  alert('clicked');
});

我在继续检查点击的元素是否为锚元素之前添加了一个条件。最好添加一些东西来选择它，如类或Id。

我使用.is()方法，该方法根据您传递的用于询问特定DOM元素的条件返回true或false。在这种情况下，我检查元素是否是锚标记。请注意，我使用.stopPropagation() method来防止事件冒泡，在这种情况下不需要这样做，但在这种情况下这是一个很好的做法，因为您最终可能会遇到意外行为。最后，不要忘记返回以避免执行后面的代码。

如果您不需要保持锚的默认行为，即不想导航到href属性中指定的位置，只需使用event.preventDefault()方法或返回{ {1}}。

检查小提琴here。

Answer 4

为什么不简单地将事件监听器添加到#myid？

＆＃13;

$('#myid').on('click', function(event) {
  alert('clicked');
})

＆＃13;

#myid{
  border: 1px solid;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <div id="myid">
    something <br>
    <a target="_blank" href="#">link</a>
    <p>paragraph</p>
  </div>
</div>

＆＃13;

单击除特定元素的特定元素之外的主体

4 个答案: