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

Posted 2023-05-07

【中文标题】<a> 的父级事件冒泡，从 onclick 事件侦听器返回 false

【英文标题】：Event bubbling for parent of <a>, which returns false from onclick event listener

【发布时间】：2011-04-01 13:48:55

【问题描述】：

我尝试为以下任务制定一个通用解决方案：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!");？

【参考方案1】：

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

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

这是working fiddle。

【参考方案2】：

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

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

例子：

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

【参考方案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;
);

【讨论】：

他不想阻止某些东西冒泡，他想允许冒泡。

停止传播会阻止它冒泡

@GenericTypeTea - 啊，我误解了“停止冒泡”