我如何防止嵌套列表的單擊事件

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>

我如何僅在單擊“水果”而不是“蘋果”，“香蕉”時綁定點擊事件

我希望單擊Apple或Banana時不會發生單擊事件

請幫我..

Answer 1

event.stopPropagation() ，一種方法是使用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元素不同，則事件起源於嵌套的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());

    });