从非按钮元素触发按钮单击 [英] Trigger a button click from a non-button element
问题描述
如何从一个原本不具有原生可点击行为的元素中触发点击事件？
例如，我知道您只需使用以下：
document.getElementById（'x'）。
但是，如果'x'是'DIV'，会发生什么？我有一个实现，它似乎不触发...我得到的错误（chrome 12）：
未捕获TypeError：Object＃< HTMLDivElement>没有方法点击
想法？
快速编辑 - 我在寻找vanilla JS这里...我喜欢重塑在我的形象...： - ）
对于经典的可点击元素（如按钮或链接）， click（）应在所有浏览器中使用。但对于其他元素（如div），您需要在某些浏览器中使用 onclick（），而在其他浏览器中需要 click（） p>
我强烈建议您不要试图自己弄明白这一点，而是使用一个javascript库，例如 MooTools ， jQuery ，原型， YUI ，或许多其他人。原因是，这个东西正确的跨浏览器是 。为什么浪费你的时间，当别人已经工作，努力使它正确，使它超级简单的使用？我保证，如果你花时间学习如何使用框架，你会得到更远的你的JavaScript开发技能更快。
这就是说，这里的脚本将工作在跨浏览器，并会做如果这两个属性都没有赋值的函数，则为空。
el = document.getElementById（'id'）;
if（el.onclick）{
el.onclick（）;
} else if（el.click）{
el.click（）;
}
你也可以这样做，但也许这还不太清楚： / p>
（el.onclick || el.click || function（）{}）
一些经验性测试在div上触发点击事件：
- Firefox 3和4使用
onclick。 - IE7,8使用两者。 / li>
- Chrome使用
onclick（如v。12.0.742.100中所选）。 - iPhone 4与iOs 4.2.1使用
onclick。
测试脚本： / p>
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本身来证明它也能实现真正的点击。
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):
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... :-)
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.
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.
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:
- 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.
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.
这篇关于从非按钮元素触发按钮单击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
