我在列表项中有一个锚点。这两个元素都有一个事件。我想在单击内的锚点时避免单击列表项。
我想避免混乱。我找到了这个功能,但我无法按照自己的意愿使用它们:
这是代码:
// HTML
<ul>
<li id="1">Item #1 <a href="" class="delete">[DEL]</a></li>
<li id="2">Item #2 <a href="" class="delete">[DEL]</a></li>
<li id="3">Item #3 <a href="" class="delete">[DEL]</a></li>
<li id="4">Item #4 <a href="" class="delete">[DEL]</a></li>
</ul>
// JS
$("ul").sortable();
$(document).on("click", "li", function() {
alert("list-item clicked.");
});
$(document).on("click", "a.delete", function(e) {
e.preventDefault();
if (confirm("Del?")) {
alert("list-item clicked.");
}
// do nothing
});
这是小提琴:http://jsfiddle.net/UtE87/1/
最好的方法是什么?非常感谢提前!
答案 0 :(得分:2)
由于事件传播,您需要停止事件传播。可以通过调用e.stopPropagation()
来完成,但由于您也在阻止默认操作,您可以通过从事件处理程序返回false来完成这两项操作
$(document).on("click", "a.delete", function(e) {
if (confirm("Del?")) {
console.log("list-item a clicked.");
}
// do nothing
return false; //prevent default and stop propagation
});
演示:Fiddle
答案 1 :(得分:1)
如果未单击删除元素,您可以检查单击了哪个元素并仅运行列表项单击功能。
演示:http://jsfiddle.net/k5sdC/1/
jQuery的:
$(document).on("click", "li", function(e) {
if (!$(e.target).is('a.delete')){
alert("list-item clicked.");
}
});