javascript - Angularjs 不会触发由 addEventListener 处理的事件

Question

我正在尝试在 <A> 上触发事件带有 mousedown 的元素由 addEventListener 处理的事件打电话，但我不知道为什么它不起作用。
我尝试使用 angular.element(el).triggerHandler('click');但它只会触发通过 ng-click 指定的事件处理程序.

在下面的代码中，当我单击“触发”链接时，只有“first”被打印到控制台。我如何让它也打印“零”？

JSBin link

HTML:

<a id='zero' href="#">zero</a><br/>
<a id="first" href="" ng-click="firstLinkClick()">first</a>
</br>
<a id="trigger" href="" ng-click="triggerLinkClick()">trigger</a>

Javascript:

document.getElementById('zero').addEventListener('click', function() {
  console.log('zero');
}, false);

app.controller('myCtrl', function myCtrl($timeout, $scope) {
  $scope.firstLinkClick = function() {
    console.log('first');
  };

  $scope.triggerLinkClick = function() {
    $timeout(function() {
      var el = document.getElementById('zero');
      angular.element(el).triggerHandler('click');
    }, 100);

    $timeout(function() {
      var el = document.getElementById('first');
      angular.element(el).triggerHandler('click');
    }, 100);
  };
});

Answer 1

Angular 内部使用 jqLit​​e。如果您在 Angular 之前加载 jQuery，它将使用 jQuery 而不是 jqLit​​e。

triggerHandler 仅触发由 jqLit​​e/jQuery 添加的事件。

要触发由 addEventListener 添加的事件，您需要使用标准 API。

例如:

var el = document.getElementById('zero');
el.click();

或者:

var el = document.getElementById('zero');
el.dispatchEvent(new Event('click'));

如果您需要支持旧版浏览器，您可以先阅读 here .