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

Trigger a button click from a non-button element

提问by Abhishek

How would you trigger a click event from an element that supposedly does not have native clickable behaviours?

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

For example, I know that you could simply just use the following:

例如，我知道您可以简单地使用以下内容：

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

But what happens if 'x' is a 'DIV'? I have an implementation, and it doesn't seem to trigger... I get the error (chrome 12):

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

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

Ideas?

想法？

Quick Edit - I'm looking for vanilla JS here... I like reinventing the wheel in my image... :-)

快速编辑 - 我在这里寻找 vanilla JS ......我喜欢在我的图像中重新发明轮子...... :-)

回答by ErikE

For classic clickable elements like buttons or links, click()should work in all browsers. However for other elements like divs, you need onclick()in some browsers and click()in others.

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

I would strongly recommend that instead of trying to figure this out for yourself, you use a javascript library such as MooTools, jQuery, Prototype, YUI, or many others. The reason is that getting this stuff right cross-browser is hard. Why waste your time when others have worked and worked to get it right and make it super simple to use? I guarantee that if you spend your time learning how to use a framework you will get farther in your javascript development skill faster. Later you can come back and see how it's all done in the nitty gritty if you want to.

我强烈建议您不要尝试自己解决这个问题，而是使用 javascript 库，例如MooTools、jQuery、Prototype、YUI或许多其他库。原因是很难在跨浏览器中正确使用这些东西。当其他人已经工作并努力使其正确并使其超级易于使用时，为什么要浪费您的时间？我保证，如果您花时间学习如何使用框架，您将更快地掌握 JavaScript 开发技能。如果您愿意，稍后您可以回来看看这一切是如何在本质上完成的。

That said, here's script that will work cross-browser, and will do nothing if neither of these properties have a function assigned:

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

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

You could also do this, but perhaps this is a little less clear:

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

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

Some empirical tests firing the click event on a div:

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

• Firefox 3 and 4 use onclick.
• IE7, 8 use both.
• Chrome uses onclick(as checked in v. 12.0.742.100).
• Safari on iPhone 4 with iOs 4.2.1 uses onclick.

• Firefox 3 和 4 使用onclick.
• IE7、8两者都用。
• Chrome 使用onclick（在 v. 12.0.742.100 中检查）。
• 带有 iOs 4.2.1 的 iPhone 4 上的 Safari 使用onclick.

Test script:

测试脚本：

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);

Run this in developer tools in your browser, or javascript:in front and void(0);at the end then paste into the address bar and hit Enter. Then try d.click()and d.onclick(). You can click the div itself to prove it works with real clicks too.

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

回答by KooiInc

Use this if you actually want to trigger an event programmatically:

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

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');

回答by Ben Rowe

You will need to feature detect as different browsers (using non-html5 doctype) can support different dom methods:

您需要进行功能检测，因为不同的浏览器（使用非 html5 文档类型）可以支持不同的 dom 方法：

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

回答by Jordan

You can attach an onclick method to anything, but if you don't have any events attached to the actual element itself, it will error out, or simply do nothing.

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

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

回答by Aaron Hathaway

Try doing something like the following:

尝试执行以下操作：

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

回答by ronalddddd

I've had a similar issue while trying to use the .click method on stock android browsers. Seems like substituting .click with $('selector').on('click', cb);solves the issue.

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