点击ul标签时触发事件，而不是li标签（使用jQuery）。

Question

如何使用jQuery只影响ul标签而不是所有li标签的点击事件？

<!-- HTML -->
<ul class="wrap">
    <li>test1</li>
    <li>test2</li>
    <li>test3</li>
</ul>

我尝试了以下这个jquery，但它不起作用。

//Javascript
jQuery("ul.wrap").not(jQuery("ul > li")).click(function(){
      //fire only ul
});

我们应该如何做到这一点？

- user3763026

---

但是最终你会有li。你说的“单击ul”是什么意思？ - Pratik Joshi

请查看这个 JSFiddle：http://jsfiddle.net/v5eh8/1/。UL 元素包含 LI 元素，因此如果您单击 LI 元素，则会像单击 UL 元素一样。 - Pratik Joshi

我的意思是jQuery的点击事件将影响除所有li之外的其他元素。 - user3763026

Answer 1

您可以使用以下代码轻松完成此操作：

jQuery('.wrap').click(function (event) {    
    if ( !$(event.target).is( "li" ) ) {
        console.log('ul clicked!');
    } 
});

您可以在此处查看带有背景颜色的示例，展示了 ul 和 li： http://jsfiddle.net/S67Uu/2/。

- John Skoumbourdis

Answer 2

事件会从子元素“冒泡”到其父元素。您需要将事件附加到 ul，并在子元素的 li 上附加另一个事件，并使用 stopPropagation() 来阻止冒泡:

jQuery("ul.wrap")
    .on('click', function(){
        // do something...
    })
    .on('click', 'li', function(e) {
        e.stopPropagation();
    });

- Rory McCrossan

---

谢谢Rory McCrossan。这个完美地运作了。我尝试在模态框中使用它。谢谢。 - user3763026

@user3763026 没问题，很高兴能帮助。 - Rory McCrossan