jQuery识别是否单击了li或单击了li内的p

Question

<ul id='myid'>  
<li id='1'> my text 1 <p id='1' >inside p1 clicked</p></li>  
<li id='2'> my text 2 <p id='1' >inside p2 clicked</p></li>  
<li id='3'> my text 3 <p id='1' >inside p3 clicked</p></li>  
<li id='4'> my text 4 <p id='1' >inside p4 clicked</p></li>  
<li id='5'> my text 5 <p id='1' >inside p5 clicked</p></li>  

</ul>    

嗨，我只是想知道如果我单击“我的文本1”会如何发出警报，以及如果我单击“ inside p1 clicked”会如何发出警报。 因为每当我尝试单击“我的text1”时，它都起作用。 但是，当我尝试单击“ inside p1 clicked”时，会带来两个警报，一个是“我的文字1”，另一个是“ inside p1 clicked”。 请帮助可能是解决方案。

下面是我正在使用的代码。

$（“＃myid”）。delegate（'p'，'click'，function（）{

提前致谢

Answer 1

这是事件冒泡的问题 。 您可以使用event.target获取当前单击的元素。

如果要停止事件冒泡，可以使用event.stopPropagation

// click event for li
$("#myid li").click(function(){
    alert("li clicked");
});

// click event for p
$("#myid li p").click(function(e){
    alert("p clicked");
    // stop event bubbling
    e.stopPropagation();
});

而且您的HTML也是无效的。 切勿以数字开头的ID。

如果要为将来的元素附加click事件，请使用.live或.delegate 。

并将return false代替e.stopPropagation 。

// click event for li
$("#myid li").live("click", function(){
    alert("li clicked");
});

// click event for p
$("#myid li p").live("click", function(){
    alert("p clicked");
    // stop event bubbling
    return false;
});

Answer 2

您可以使用类似的选择器

$（“ li p”）。click（function（）{
alert（“单击li内部的p”）;
}）

这是演示

Answer 3

如果您已经收到两个事件，则在每个点击处理程序中调用event.stopPropagation()可以防止另一个事件被调用。

甚至更简单的方法是在#myid中添加一个单击处理程序，然后检查event.target属性以决定如何处理它。