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

【问题标题】：how can i prevent nested list's click event如何防止嵌套列表的点击事件
【发布时间】：2013-11-05 09:06:28
【问题描述】：

<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>

如何只在点击水果而不是苹果、香蕉时绑定点击事件

我希望点击苹果或香蕉时不会发生点击事件

请帮帮我..

【问题讨论】：

@opalenzuela preventDefault 与它无关。它不会停止传播

标签： javascript jquery list

【解决方案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

【讨论】：

【解决方案2】：

用一个元素（如 span）包裹你的“水果”，并在这个元素上绑定事件。

根据 Quentin 的建议，使用会告诉用户它是可交互的元素（如

【讨论】：

使用被设计成可交互的元素（如<button>），这样它就会在使用非指点设备的人的导航顺序中。

【解决方案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。两者都是一样的。如果您使用它，它将处理您被点击的元素的点击事件。 live() 方法在 jQuery 1.7 版中被弃用，并在 1.9 版中被删除。改用 on() 方法

【讨论】：

【解决方案4】：

试试这个。

$("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();
    }
    });

【讨论】：

2 个错误：PreventDefault（大写）和 PreventDefault 在这里没有帮助。

【解决方案5】：

试试这个：working example

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

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

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

    });

【讨论】：

【解决方案6】：

$(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

【讨论】：

个人 - 我反对附加另一个处理程序只是为了阻止它。