$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>

以及我的控制器中的功能：

$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. 事件冒泡

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

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

1.2.4. 活动取消

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

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

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