javascript - 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”如何提醒。因为每当我尝试点击“我的文本 1”时，它就起作用了。但是当我尝试点击“inside p1 clicked”时，它会带来两个警报，一个是“my text 1”，另一个是“inside p1 clicked”。请帮助可能是解决方案。

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

$("#myid").delegate('p','click', function(){

提前致谢

Answer 1

这是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。

如果您还想为 future 的元素附加点击事件，请使用 .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;
});