javascript - 为什么当我点击 li 时会触发 ul？

Question

我有这个html：

 <ul class='loc-list'>  
     <li id="where_7" class="cont-list">North America
         <ul>
            <li id="contry_114" class="contry-list">canada</li>
            <li id="contry_115" class="contry-list">mexico</li>
            <li id="contry_117" class="contry-list">united states</li>
         </ul>
     </li>
 </ul>

现在我已经编写了两个 jquery 函数 onclick 列表为：

第一：^_

$(".cont-list").on("click", function(event){
     alert("clicked on continent's list"); // working fine
 };

第二：^_

$(".contry-list").on("click", function(event){
     alert("clicked on country's list");  // not working!
 };

在这里，当我单击cont-list时，它会被调用，但是在第二个^函数中它没有被调用，而是第一个^函数被调用！

是因为它是一个内部列表吗？如果是这样，那么如何处理它以便仅在单击该列表时才调用它？

演示在这里

提前致谢！

Answer 1

那是因为事件冒泡了，你可以使用对象stopPropagation的方法event：

$(".contry-list").on("click", function(event){
     event.stopPropagation();
     alert("clicked on country's list");  
});

如果要li动态生成元素，则应委托事件：

$(document).on('click', '.coutry-list', function(){
   console.log('li element is clicked');
})

Answer 2

$(".contry-list").on("click", function(event){
     event.stopPropagation();
     alert("clicked on country's list");
});

Answer 3

需要使用event.stopPropagation()

$(".contry-list").on("click", function(e){
     e.stopPropagation();
     alert("clicked on country's list");
});

在这里演示

Answer 4

jQuery 中的修复是：

$(".contry-list").on("click", function(event){
     alert("clicked on country's list");  // not working!
    return false; 
});

但正如 epascarello 指出的那样，您应该了解 DOM 事件冒泡（和捕获）以理解它。