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

Question

所以我在 <a> 中有一个按钮链接到另一个位置的标签。当我单击我想要的按钮时，它不会触发父标记中的链接。我试过使用 $event.stopPropagation()但它似乎不起作用。

这是我的 html:

<div class="column" ng-repeat="eventObj in events" ng-repeat-dimmer>
      <a href="#/sample-event/{{eventObj.eventId}}">
        //divs
              <h2>{{eventObj.eventName}}</h2>
              <div>{{eventObj.eventStart | date}} - {{eventObj.eventEnd | date}}</div>
              <h5>{{eventObj.eventVenue}}</h5>
              <button ng-click="deleteEvent(eventObj,$event)"></button>
        //divs
        <img class="ui image" src="assets/img/sampleevent.png"/>
      </a>
    </div>

以及我的 Controller 中的函数:

$scope.deleteEvent = function(delEvent,$event){
            $event.stopPropagation();
            console.log($event.isPropagationStopped())
            $scope.targetEvent = delEvent;
            if(confirm("Note: This will permanently delete the event and games associated with it.")==true){
                EventService.deleteEvent($scope.targetEvent)
                .then(function(){
                    EventService.getEvents()
                    .then(function(events){
                        $scope.events = events;
                    });
                })
                window.location.reload();
            }
        }

我在这里做什么？

Answer 1

改用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。事件冒泡

被指定为冒泡的事件最初将按照与非冒泡事件相同的事件流进行。该事件被分派(dispatch)到它的目标 EventTarget，并且触发在那里找到的任何事件监听器。然后，冒泡事件将触发通过向上跟踪 EventTarget 的父链找到的任何其他事件监听器，检查在每个连续的 EventTarget 上注册的任何事件监听器。这种向上传播将持续到并包括文档。在此阶段不会触发注册为捕获器的 EventListener。从事件目标到树顶的 EventTargets 链在事件的初始分派(dispatch)之前确定。如果在事件处理过程中树发生修改，事件流将基于树的初始状态进行。

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

1.2.4。事件取消

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

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

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