javascript - 使用 jQuery 单击元素时获取数据属性的值？

Question

我有以下非常简单的代码。基本上我需要在单击元素时获取数据属性的值。

我使用以下代码:

$(document).on('click', ".MyLi", function (e) {
  var cont = $(this).attr('data-cont');
  alert(cont);
});

这可以工作，但有一个问题。

如果您在 fiddle 中运行以下代码，您将看到它将在 alert() 中显示 data-cont 值；但是当我点击子菜单时，它会首先在alert()中显示子菜单data-cont，然后显示我的菜单 data-cont 这是它的父级!

$(document).on('click', ".MyLi", function (e) {
  var cont = $(this).attr('data-cont');
  alert(cont);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<li class="MyLi" data-cont="MY MENU ">
  <a><i></i>&nbsp;MY MENU</a>
  <ul>
    <li class="MyLi" data-cont="MY SUBMENU">
      <a><i></i>&nbsp;MY SUBMENU</a>
    </li>
  </ul>
</li>

我只需要被点击元素的data-cont值!

有人可以让我知道我做错了什么吗？

Answer 1

这里发生的事情称为事件冒泡/传播。 event.stopPropagation() 就是您正在寻找的

这会阻止事件在您的情况下在同一选择器 .MyLi下向上冒泡到顶部元素或向下遍历到较低元素。

了解更多关于 here .

$(document).on('click', ".MyLi", function(e){

  e.stopPropagation();  
  var cont = $(this).attr('data-cont');
  
  alert(cont);

  
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<li class="MyLi" data-cont="MY MENU ">
<a>
<i></i>&nbsp;
MY MENU 
</a>
<ul>
<li class="MyLi" data-cont="MY SUBMENU"><a>
<i></i>&nbsp;
MY SUBMENU</a></li>
</ul></li>