原生javascript点击dom元素

Native javascript click on on dom element

本文关键字：元素 dom 点击 javascript 原生      更新时间：2023-09-26

我需要调用本地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>

I似乎是一个使用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(…)

我应该如何正确地做到这一点?

看起来是这样的工作方法:

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

源码:如何以编程方式触发ng-click [AngularJS]

在与OP聊天后，我们发现使用的Angular版本是1.3.17。对于这个版本，触发点击的正确方法是:

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

您可以通过向元素分派事件来模拟单击。有一个对象(Event)，但是在IE中不支持构造函数。您可以使用已弃用的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>

相关文章：