Question

如何从一个据称没有原生可点击行为的元素触发点击事件？

例如，我知道您只需使用以下内容：

document.getElementById('x').click();

但如果'x'是'DIV'会怎样？我有一个实现，它似乎没有触发......我得到错误（chrome 12）：

Uncaught TypeError: Object #<HTMLDivElement> has no method 'click'

想法？

快速编辑 - 我在这里寻找香草JS ......我喜欢在我的形象中重新发明轮子......： - ）

Answer 1

对于按钮或链接等经典可点击元素，click()应适用于所有浏览器。但是对于div等其他元素，在某些浏览器中需要onclick()，在其他浏览器中需要click()。

我强烈建议您不要试图自己解决这个问题，而是使用javascript库，例如MooTools，jQuery，Prototype，YUI，或者很多其他的。原因是这个东西正确的跨浏览器 hard 。为什么浪费你的时间，当别人工作并努力使其正确并使其使用起来非常简单？我保证，如果你花时间学习如何使用框架，你将更快地获得更快的javascript开发技能。之后你可以回过头来看看如果你愿意的话，它是如何在细节中完成的。

也就是说，这里的脚本可以跨浏览器工作，如果这些属性都没有分配功能，它将不会执行任何操作：

el = document.getElementById('id');
if (el.onclick) {
   el.onclick();
} else if (el.click) {
   el.click();
}

你也可以这样做，但也许这不太清楚：

(el.onclick || el.click || function() {})();

在div上触发click事件的一些实证测试：

Firefox 3和4使用onclick。
IE7,8同时使用。
Chrome使用onclick（如第12.0.742.100节中所述）。
带有iOs 4.2.1的iPhone 4上的Safari使用onclick。

测试脚本：

var d = document.createElement('div'); d.style.position = 'absolute'; d.style.top = '0'; d.style.left = '0'; d.style.width = '200px'; d.style.height = '200px'; d.style.backgroundColor = '#fff'; d.style.border = '1px solid black'; d.onclick = function() {alert('hello');}; document.body.appendChild(d);

在浏览器中的开发者工具中运行此操作，或者在前面javascript:和最后void(0);然后粘贴到地址栏并按Enter键。然后尝试d.click()和d.onclick()。您可以单击div本身来证明它也适用于实际点击。

Answer 2

您需要具有检测功能，因为不同的浏览器（使用非html5 doctype）可以支持不同的dom方法：

var ele = document.getElementById('x');
if(typeof ele.click == 'function') {
  ele.click()
} else if(typeof ele.onclick == 'function') {
  ele.onclick()
}

Answer 3

如果您确实想以编程方式触发事件，请使用此选项：

function eventFire(el, etype){
  if (el.fireEvent) {
   (el.fireEvent('on' + etype));
  } else {
    var evObj = document.createEvent('Events');
    evObj.initEvent(etype, true, false);
    el.dispatchEvent(evObj);
  }
}
//usage
eventFire(document.getElementById('x'),'click');

Answer 4

您可以将onclick方法附加到任何内容，但如果您没有任何事件附加到实际元素本身，则会出错，或者什么都不做。

var el = document.getElementById('x');
el.onclick = function() { //do something };
el.click();

Answer 5

尝试执行以下操作：

var my_div = document.getElementById('x');
my_div.onclick = function() {
   alert('hello world');
}

Answer 6

我试图在股票Android浏览器上使用.click方法时遇到了类似的问题。似乎用$('selector').on('click', cb);代替.click解决了这个问题。

从非按钮元素触发按钮单击

6 个答案: