Question

我觉得我应该更有经验，然而这似乎无法解决。点击链接或其中的任何内容后，我希望这是$(e.target)来呼叫父母或其他内容。

我的脚本细分如下：

$(document).on('mousedown', function(e) {
    if ($(e.target).is('ul.SiteNav>li>a')) {
    alert('Hello World!')
  }
});

当然这只是一个片段，但尽管如此，我还是刚开始使用$(e.target)，但我无法解决为什么你无法点击<i></i>中<a></a>的问题。因为你仍然点击链接，不是你/...

以下是我的问题的JSFiddle示例

Answer 1

target将是您实际与之交互的最深层次元素，但可能令您感到困惑的是，事件会使dom树冒泡，因此如果事件处理程序正在侦听<a>点击，则单击孩子仍然会冒泡到父母并触发事件处理程序

使用closest()做你想做的事

if ($(e.target).closest('.SiteNav a').length){
   // code if <a> expected
}else{
   // do something else when not <a>
 }

closest()还将包含实际目标，并从该起点开始工作。

Answer 2

您可以点击它，然后实际获得该活动。只有e.target是您单击的元素。这是有道理的。处理程序在文档上，元素是i ..为什么链接会获得点击？

您可以尝试使用closest()在父链中找到它。当元素本身或其父元素与给定的选择器匹配时，它将给出结果。

$(document).on('mousedown', function(e) {
  if ($(e.target).closest('ul.SiteNav>li>a').length > 0) {
    alert('Hello World!')
  }
});

.SiteNav {
  List-style:none;
}
a {
	float:left;
	height:42px;
	line-height:42px;
	padding:0 10px;
	color: #f7dd71;
	text-decoration: none;
	font-size: 14px;
	font-family: "Comic Sans MS", cursive, sans-serif;
	font-weight: bold;
}
a:nth-of-type(1) { padding-right:2px; }
a:nth-of-type(2) { padding:0 5px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="SiteNav">
  <li><a href="javascript:;" data-link="Reply">Reply</a></li>
  <li><a href="javascript:;" data-link="Reply"><i class="fa fa-angle-down"></i></a></li>
</ul>

$（e.target）等于一个链接，即使点击其中的元素？

2 个答案: