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

Question

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

例如,我知道你可以简单地使用以下内容:

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

但是如果'x'是'DIV'会发生什么？我有一个实现,它似乎没有触发...我得到错误(铬12):

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

想法？

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

Answer 1

对于经典的可点击元素,如按钮或链接,click()应该适用于所有浏览器.但是对于像div这样的其他元素,您需要onclick()在某些浏览器和click()其他浏览器中使用.

我强烈建议您不要试图自己解决这个问题,而是使用一个javascript库,如MooTools,jQuery,Prototype,YUI或许多其他库.原因是让这些东西成为正确的跨浏览器很难.为什么浪费你的时间,当别人工作并努力使其正确并使其使用起来非常简单？我保证,如果你花时间学习如何使用框架,你将更快地获得更快的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

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

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 3

您需要具有检测功能,因为不同的浏览器(使用非html5 doctype)可以支持不同的dom方法:

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