本机 javascript 单击 dom 元素

Question

我需要在原生中调用点击操作 javascript。我得到以下元素：

<svg class="pull-right svg-cross ng-isolate-scope" xmlns="http://www.w3.org/2000/svg" data-svg-icon="" icon="cross" ng-click="dismissBanner()">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-cross"></use>
</svg>

我好像是用angular的网站。我想单击该元素，以便正确调用函数 dismissBanner()。因此我尝试了以下方法：

document.getElementsByClassName('pull-right svg-cross ng-isolate-scope')[0].click();

和

document.getElementsByClassName('pull-right svg-cross ng-isolate-scope')[0].onclick();

然而，两次尝试都失败了。我收到错误 Uncaught TypeError: document.getElementsByClassName(...)[0].onclick is not a function(…)。

我也直接调用了dismissBanner();函数，但是，然后我得到错误：Uncaught ReferenceError: dismissBanner is not defined(…)

我应该怎么做才正确？

Answer 1

看起来这是工作方法：

angular.element('.svg-cross').trigger('click');

来源：How to trigger ng-click [AngularJS] programmatically

跟OP聊了一下，发现Angular使用的版本是1.3.17。对于这个版本，触发点击的正确方法是这样的：

var el = document.getElementsByClassName('pull-right svg-cross ng-isolate-scope')[0];
angular.element(el).triggerHandler('click');

Answer 2

您可以通过向元素分派事件来模拟点击。有一个对象 (Event), but the constructor is not supported in IE. You can overcome that with a deprecated API (document.createEvent):

function mock() {
  var evt;
  try {
    evt = new Event('click');
  }
  catch(e) {
    evt = document.createEvent('MouseEvents');
    evt.initMouseEvent('click', true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
  }

  document.getElementById('trgt').dispatchEvent(evt);
}

<div id="trgt" onclick="alert('clicked!')">Don't click me</div>
<div onclick="mock()">Click me!</div>

本机 javascript 单击 dom 元素

Native javascript click on on dom element

javascript

dom

click

onclick