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

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 而不是 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());
});

让我们分解那里的关键线：

• get e.target，事件起源的元素
• 用它制作一个 jQuery 对象
• 检查该元素是否是li或获取其最近的li祖先（closest这样做）
• 将其li作为原生 DOM 元素获取
• 将 与li绑定事件处理程序的地方进行比较

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

jsFiddle

Answer 2

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

根据 Quentin 的建议，使用会告诉用户它是可交互的元素（如 <button>、<a>），事实上它会更好。

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。两者都是一样的。如果您使用它，它将处理您被点击的元素的点击事件。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()
    });
});

演示：小提琴

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

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

演示：小提琴

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

试试这个：工作示例

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

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

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

    });