jquery - jQuery，仅在单击 li 而不是 a 标签时触发

Question

我有以下设置

<ul>
   <li><a href="http://www.example.com">Example</a></li>
   <li><a href="http://www.example2.com">Example2</a></li>
</ul>

li 的宽度由 css 设置为 400px；

我正在尝试编写一些仅在单击 li 时才触发的 jquery，而不是 a 标签。

建议？

Answer 1

使用e.stopPropagation(); 在子元素上：

$('li').click(function(){
   alert('This will be alerted on the li, not the anchor inside');
});

$('li a').click(function(event){
   event.stopPropagation();
});

---

jsFiddle在这里。

Answer 2

在点击处理程序中获取事件时，查看 event.target / event.originalTarget

这应该会告诉您是哪个元素导致了该事件，您可以对其进行处理或忽略它。

function clickHanlder (e)
{
   if (e.target.tagName != "A") { return; }
}

Answer 3

您也可以在函数中传入“e”，然后检查目标。只需阅读多莉的评论，我就会同意。在我看来，这是最好的路线并且总是有效的。

$('element').on('click', function (e) {
    if(e.target == 'check the tag here'){
       // do something.
    }
});

Answer 4

演示--> http://jsfiddle.net/w2zBK/

$('li a').click(function(event){
   return false;
});

Answer 5

$('li').click(function(){
alert('li here');
});
$('ul li a').click(function(){
return false;
});