$ event.stopPropagation()运行,但父事件仍然执行

时间:2017-04-09 17:46:03

标签: javascript jquery html angularjs

所以我在ORS="\r\n"标签内有一个链接到另一个位置的按钮。当我单击我想要的按钮时,它不会触发父标记中的链接。我尝试过使用BEGIN,但似乎无效。

这是我的HTML:

<a>

和我控制器中的功能:

$event.stopPropagation()

我在这做什么?

1 个答案:

答案 0 :(得分:4)

请改用event.preventDefault,这是一个例子

<script>
function clickFunction(e)
{
alert('click');

    e.preventDefault();
}
</script>
<a href="http://google.com" target="_blank">
  <button onclick="clickFunction(event);">
  test
  </button>
</a>

https://jsfiddle.net/3Lrr24qu/

至于为什么它不起作用,触发超链接是默认事件而不是事件监听器。如果你有一个onclick而不是链接上的href,event.stopPropagation可以工作,请参阅下面的文档。

来自https://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-flow-capture

1.2.3。事件冒泡

指定为冒泡的事件最初将以与非冒泡事件相同的事件流进行。事件被调度到其目标EventTarget,并且发现触发的任何事件侦听器。然后,冒泡事件将触发通过向上跟踪EventTarget的父链找到的任何其他事件侦听器,检查在每个连续的EventTarget上注册的任何事件侦听器。这种向上传播将持续到包括文档在内。在此阶段,不会触发注册为捕获者的EventListeners。在事件的初始分派之前,确定从事件目标到树顶部的EventTargets链。如果在事件处理期间对树进行了修改,则事件流将根据树的初始状态继续进行。

任何事件处理程序都可以通过调用Event接口的stopPropagation方法来选择阻止进一步的事件传播。如果任何EventListener调用此方法,则将触发当前EventTarget上的所有其他EventListener,但冒泡将停止在该级别。只需要一次stopPropagation调用就可以防止进一步冒泡。

1.2.4。事件取消

某些事件被指定为可取消。对于这些事件,DOM实现通常具有与事件关联的默认操作。一个例子是Web浏览器中的超链接。当用户单击超链接时,默认操作通常是激活该超链接。在处理这些事件之前,实现必须检查已注册接收事件的事件侦听器并将事件分派给这些侦听器。然后,这些侦听器可以选择取消实现的默认操作或允许默认操作继续。对于浏览器中的超链接,取消操作将导致不激活超链接。

取消是通过调用Event的preventDefault方法完成的。如果一个或多个EventListeners在事件流的任何阶段调用preventDefault,则默认操作将被取消。

不同的实现将指定与每个事件关联的自己的默认操作(如果有)。 DOM不会尝试指定这些操作。