2

我在文本上有一个无序列表，例如：

<a href="http://google.com">
  <ul>
    <li>OK</li>
  </ul>
</a>

使用 css 将无序列表绝对定位在文本上方

a {
  position:relative;
}
ul {
  position: absolute;
  top:0;
  left:0;
}

然后我使用 jQuery 的 .on 函数让 li 响应点击：

$(document).on("click", "li", function() {
  alert('hello');
});

但是，当我单击 li 时，a 中的链接也被单击，并让我转到 google.com。

单击li时如何防止a中的链接？

该演示可以在以下位置找到：http: //jsfiddle.net/jfq8L/

4

5 回答 5

4

您需要做的是阻止事件在树上冒泡。你可以用 stopPropagation()

并且您可以将事件直接绑定到 li，如果页面加载时不存在，您只需要委托它。

$('li').on("click", function(e) {
    e.stopPropagation();
    alert('hello');
});
于 2013-09-04T10:43:05.983 回答
3

你有一个错误的标记，a是一个内联元素并且ul是一个块级元素。不能在块级元素中嵌套行内元素

于 2013-09-04T10:38:44.597 回答
1 
$(document).on("click", "li", function(e) {
    e.preventDefault();
    alert('hello');
});
于 2013-09-04T10:36:07.650 回答
1

您要做的是检测对 li 元素的点击，但阻止事件通过 a.

您将要分离出 li 的事件侦听器并使用

$('li').on("click", function(e) {
    e.stopPropagation();
}

这是您的小提琴的编辑：http: //jsfiddle.net/epwec/1/

单击a会直接触发其事件侦听器，但单击li只会触发 li 的事件侦听器。

于 2013-09-04T10:55:11.060 回答
0

试试这个

$('a ul li').click(function() {
    alert('hello');
});

或者

$('ul li').click(function() {
        alert('hello');
    });

或者

 $('li').click(function() {
        alert('hello');
    });

或者

$(document).on("click", "li", function(event) {
     event.preventDefault();
    alert('hello');
});
于 2013-09-04T10:36:47.053 回答