javascript - 使用jquery更改内部选定元素的功能？

Question

jquery 是否可以说如果我单击列表元素会发生某些事情，但是如果我单击该列表中的元素（例如跨度），则无需更改

例子

<li><span>hello</span></li>如果我单击 li 元素 => alert("list")，如果我单击 li => alert("hello") 内的 span 元素，但它也不必向我显示 alert("list") .

Answer 1

是的，检查event.target触发事件的节点。

$('li').click(function(event){
    if (event.target. == event.currentTarget)
        // li element triggered
    else
        // inner elements triggered
});

现场愚蠢的演示

Answer 2

你需要使用event.stopPropagation;

http://api.jquery.com/event.stopPropagation/

jsFiddle 演示

---

如果您使用该.live()方法（并且您有 jQuery 1.7+），我建议您使用如下.on方法：

$('ul').on('click','li',function(){
  alert('UAAAAAAA! FOOO BARRRRR');
});

$("li").on('click','span',function(event){
  event.stopPropagation();
  $(this).text('See? No alert dropped! ;)');
}); 

更多信息请访问：http ://api.jquery.com/on

.on() 方法将事件处理程序附加到 jQuery 对象中当前选定的元素集。从 jQuery 1.7 开始，.on() 方法提供了附加事件处理程序所需的所有功能。有关从旧 jQuery 事件方法转换的帮助，请参阅 .bind()、.delegate() 和 .live()。要删除与 .on() 绑定的事件，请参阅 .off()。要附加仅运行一次然后自行删除的事件，请参阅 .one()

Answer 3

参考现场演示

1. 单击Red边框和内部 - 它的LIST
2. 单击Bluw边框和内部 - 它的HELLO

HTML：

<ul>
    <li>
        <span>hello</span>
    </li> 
</ul>​

JS：

$('*').click(function() {
    if (this.tagName == "LI")
        alert("List");
    else if (this.tagName == "SPAN")
        alert("hello");
    return false;
});​