AngularJS不会触发addEventListener处理的事件 [英] Angularjs doesn't trigger event handled by addEventListener
问题描述
我正在尝试通过addEventListener
调用处理的mousedown
事件来触发<A>
元素上的事件,但我不知道为什么它不起作用.
我尝试使用angular.element(el).triggerHandler('click');
,但是它只会触发通过ng-click
指定的事件处理程序.
I'm trying to trigger event on a <A>
element with mousedown
event handled by addEventListener
call but I don't know why it doesn't work.
I tried to use angular.element(el).triggerHandler('click');
but it only triggers event handler specified via ng-click
.
在下面的代码中,当我单击触发器"链接时,仅将"first"打印到控制台.我如何也将其打印为零"?
In the code below when I click on 'trigger' link only 'first' is printed to console. How do I make it print 'zero' as well?
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);
};
});
推荐答案
Angular在内部使用jqLite.如果您在Angular之前加载jQuery,它将使用jQuery而不是jqLite.
Angular uses jqLite internally. If you load jQuery before Angular it will use jQuery instead of jqLite.
triggerHandler
仅触发jqLite/jQuery添加的事件.
triggerHandler
only triggers events that are added by jqLite/jQuery.
要触发addEventListener
添加的事件,您需要使用标准API.
To trigger events added by addEventListener
you need to use the standard API.
例如:
var el = document.getElementById('zero');
el.click();
或者:
var el = document.getElementById('zero');
el.dispatchEvent(new Event('click'));
如果您需要支持较旧的浏览器,可以先阅读此处
If you need to support older browsers you can start by reading here.
这篇关于AngularJS不会触发addEventListener处理的事件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!