Angularjs不会触发addEventListener处理的事件

时间:2016-01-15 05:15:43

标签: javascript html angularjs

我试图通过<A>来电处理mousedown事件来触发addEventListener元素上的事件,但我不知道为什么它不会工作。
我尝试使用angular.element(el).triggerHandler('click');但它只触发通过ng-click指定的事件处理程序。

在下面的代码中点击&#39;触发&#39;仅链接&#39;第一个&#39;打印到控制台。如何使其打印“零”&#39;还有吗?

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);
  };
});

1 个答案:

答案 0 :(得分:4)

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