jquery识别是单击了li还是单击了li中的p

时间:2010-10-22 04:13:03

标签: javascript jquery html dhtml

<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”如何提醒,如果点击“在p1点击内部”,如何提醒。因为每当我尝试点击“我的text1”时它就会起作用。但是当我尝试点击“内部p1点击”时,它带有两个警报,一个带有“my text 1”,另一个带有“内部p1点击”。请帮助解决方案。

下面是我使用的代码。

$(“#myid”)。delegate('p','click',function(){

提前致谢

3 个答案:

答案 0 :(得分:5)

这是event bubbling的问题。您可以使用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。

如果您想为将来的元素添加点击事件,请使用.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;
});

答案 1 :(得分:1)

您可以使用

之类的选择器

$(“li p”)。click(function(){
警告(“点击里面的李”);
})

这是Demo

答案 2 :(得分:1)

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

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