Question

<script type="text/javascript" src="/js/jquery1.8.3.js"></script>
<script>
    $(document).ready(function(){
    $("li").has("ul").bind("click",function(e){
        console.log($(this).text());
    });
    });
</script>

<ul>
<li>Fruit
    <ul>
        <li>Apple</li>
        <li>Banana</li>
    </ul>
</li>
</ul>

如何仅在单击Fruit时绑定click-event，而不是Apple，Banana

我希望点击Apple或Banana时不会发生点击事件

请帮帮我..

Answer 1

正如已经说明的那样，一种方式是使用event.stopPropagation()。我不喜欢这种方法，因为它可以阻止页面上的任何其他事件处理程序注册事件。

最好是检查事件是否来自另一个li元素。这样的事情可以做到：

$("li").has("ul").bind("click",function(e){
    if ($(e.target).closest('li').get(0) !== this) {
        return;
    }

    console.log($(this).text());
});

让我们分开关键线：

获取e.target，即发生事件的元素
制作一个jQuery对象
检查该元素是li还是获取其最近的li祖先（closest执行此操作）
将li作为原生DOM元素
将li与绑定事件处理程序的那个进行比较

如果li元素不相同，则事件源自嵌套li。如果它们是相同的，它就没有。

jsFiddle

Answer 2

用元素（如span）包裹'Fruit'，并将事件绑定在此元素上。

根据昆汀的建议，使用一个告诉用户它是互动的元素（比如＆lt; button＆gt;，＆lt; a＆gt;），事实上它更好。

Answer 3

<script type="text/javascript" src="/js/jquery1.8.3.js"></script>
<script>
    $(document).ready(function(){
    $("ul li").on("click",function(e){
       alert($(this).text())
    });

     or

     $("ul li").live("click",function(e){
       alert($(this).text())
    }); 

    });
</script>

<ul>
<li>Fruit
    <ul>
        <li>Apple</li>
        <li>Banana</li>
    </ul>
</li>
</ul>

无需预防。基于你的jquery插件版本使用live或on。两者都是一样的。如果你使用它，它将处理你点击哪个元素的click事件。 live（）方法在jQuery 1.7版中已弃用，在1.9版中已删除。请改用on（）方法

Answer 4

$(document).ready(function () {
    $("li").has("ul").bind("click", function (e) {
        console.log($(this).text());
    });
    $("li ul").bind("click", function (e) {
        e.stopPropagation()
    });
});

演示：Fiddle

不停止事件传播的另一种解决方案就是（适用于给定的标记）

$(document).ready(function () {
    $("li").has("ul").bind("click", function (e) {
        if ($(this).is(e.target)) {
            console.log($(this).text());
        }
    });
});

演示：Fiddle

Answer 5

试试这个。

$("li").has("ul").bind("click",function(e){
        console.log($(this).text());

    e.cancelBubble = true;
    e.returnValue = false;

    //e.stopPropagation works only in Firefox.
    if (e.stopPropagation) {
        e.stopPropagation();
        e.preventDefault();
    }
    });

Answer 6

试试这个：working example

$("li").has("ul").bind("click", function (e) {

      if (!$(e.target).find("li").length) return;

        console.log($(this).text());

    });

如何防止嵌套列表的点击事件

6 个答案: