<a> 的父级事件冒泡，从 onclick 事件侦听器返回 false

Question

我尝试为以下任务制定一个通用解决方案：onclick 元素的事件侦听器

<a href="#">Some text</a>

必须返回 false。点击后可以停止页面滚动。

$("a[href='#']").bind("click", function () { return false; });  

它可以停止滚动，但return false 也停止冒泡！所以，如果我有以下代码：

HTML

<div class="clickable">
   <a href="#">Text</a>
</div>

Javascript (JQuery)

$("a[href='#']").bind("click", function () { return false; });
$(".clickable").bind("click", function(){alert("It works!");})

如果我点击“文本”，则没有警报。

我可以恢复冒泡吗？或者，可能还有其他常见的方法可以从每个此类“a”标签的onclick 事件侦听器返回 false？或者唯一的方法是在“a”上添加监听器function(){alert("It works!");}？

Answer 1

更改click 函数的签名以接受事件参数并使用preventDefault：

$("a[href='#']").bind("click", function (e) { e.preventDefault(); });
$(".clickable").bind("click", function(){alert("It works!");})

这是working fiddle。

Answer 2

<a href="#" onclick="return false;">Some text</a>

您的 jQuery 绑定点击函数应该可以继续工作。

例子：

http://jsfiddle.net/mU2dq/1/

Answer 3

为了阻止某些东西冒泡，我总是遵循这个：

$('myAnchor').live("click", function(e) {
    e.preventDefault();
    e.stopPropagation();

    //or if you want to stop all handlers
    e.stopImmediatePropagation();

    //code here

    //for IE etc.
    return false;
});