$(e.target) 等于一个链接，即使单击其中的元素

Question

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

我的脚本细分如下所示;

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

当然，这只是一个片段，但尽管如此，尽管我进行了搜索，但我还是第一次使用 $(e.target)，我无法解决为什么您无法单击<a></a>中的<i></i>，因为您仍在单击链接，不是吗/...

这是我的问题的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>