Question

我正在使用jQuery在菜单上触发点击事件：

 <div id="context-menu">
      <ul class="dropdown-menu" role="menu">
        <li><a tabindex="-1">Color</a></li>
         <li><a tabindex="-1">Transparency</a></li>
         <li><a tabindex="-1">Show/Hide</a></li>
        <!-- <li class="divider"></li>
         <li><a tabindex="-1">Separated link</a></li>-->
      </ul>
    </div>

使用此代码：

$('#context-menu').on('click', function(e) {

console.log(e);

});

我会理解如何知道点击了哪个li。

Answer 1

您应该为要匹配点击的元素指定选择器

$('#context-menu').on('click', '.dropdown-menu > li', function(e) {

现在，在您的处理程序中，this引用了点击的li元素。

Answer 2

event参数有一个target属性，它是被点击的实际元素（在本例中是li或a），用它来获取li。

var li = $(e.target).closest('.dropdown-menu li')[0]

http://api.jquery.com/closest/

Answer 3

您故意使用tabindex="-1"吗？对于键盘辅助功能，这些tabindex es应该是tabindex="0"，不是 -1。见http://webaim.org/techniques/keyboard/tabindex。看起来您应该使用<button> s，而不是<a> s。

您应该向<a>添加点击处理程序，如下所示：

$('#context-menu a').click(function() {
    // The <a> that was clicked.
    var theAnchorTag = $(this);
    // Its parent <li>.
    var theLiTag = theAnchorTag.parent();
});

如果您按下我的按钮建议，请在上面的选择器中将a替换为button。

Answer 4

$('a').click(
  function(){
    console.log($(this).parent()); /* should return link's parent-node */
    console.log($(this).parent().index()); /* should return li's index */
  }
)

点击菜单上的链接

4 个答案: