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

您将如何从假定不具有本机可单击行为的元素触发单击事件

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

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

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

但是如果“x”是一个“DIV”，会发生什么呢？我有一个实现，它似乎不会触发。。。我得到错误（chrome 12）：

未捕获类型错误：对象#没有方法“单击”

想法

---

快速编辑-我在这里寻找香草JS。。。我喜欢在我的形象中重塑轮子…：-）

尝试执行以下操作：

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

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

---

对于按钮或链接等经典的可单击元素，

click（）

应该可以在所有浏览器中使用。但是对于像div这样的其他元素，在某些浏览器中需要

onclick（）

，在其他浏览器中需要

click（）

我强烈建议您使用javascript库，如、或其他许多库，而不是试图自己解决这个问题。原因是要在浏览器中正确使用这些内容是很困难的。为什么要浪费你的时间，当别人已经努力工作，使它的权利和超级简单的使用？我保证，如果您花时间学习如何使用框架，您将更快地掌握javascript开发技能。如果你愿意的话，以后你可以回来看看到底是怎么做的

也就是说，下面的脚本可以跨浏览器工作，如果这两个属性都没有指定功能，则不会执行任何操作：

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

您也可以这样做，但这可能不太清楚：

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

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

• Firefox3和4使用

  onclick

• IE7和IE8都使用
• 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）中运行在最后，然后粘贴到地址栏并点击回车键。然后尝试
d.单击（）
和
d.onclick（）
。您可以单击div本身，以证明它也可以与真正的单击一起工作。
您可以将onclick方法附加到任何内容，但是如果您没有将任何事件附加到实际元素本身，它将出错，或者什么也不做

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

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

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

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

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

我在尝试在android股票浏览器上使用.click方法时遇到了类似的问题。似乎是替换。用
$（'selector'）单击。在（'click'，cb'）上解决了这个问题。
阅读jQuery源代码，看看他们是如何做到的。正确，但我肯定在Chrome12中看到了同样的问题。@Peter-Lol，很好的观点。。。值得一看…可能是刚找到的相同的副本@@Roberkules-哎呀。。。我想这是一个重复的问题。。。我用谷歌搜索了它，但只找到了本机可点击元素的解决方案……你的观点很好，但请注意，如果目标元素在默认行为（如a）下是可点击的，那么click（）将起作用，即使在Chrome中也是如此。我想它应该成为JS编码准则的一部分，“使用前检测功能”@Kumar问题源于不一致的domapi，而不是JavaScript语言本身。但是，是的，特征检测是一件好事。没错，弗雷德说。马特。我不是在责怪JS。我怕JS胜过我怕上帝。上帝也许会原谅你的错误，但写得不好的JS代码可能不会。@Kumar将帮助修复任何写得不好的JS代码！第一种是只使用两个等号而不是三个等号，第二种是在语句后缺少分号。@Ben我认为没有必要检查函数类型，只要检查属性是否存在即可。如果有人在这些属性中的某个属性上粘贴了一个非函数，那么您就会遇到更大的问题。请帮助我澄清这一点，但这实际上是给div一个onclick事件。。。这不是我想要的，因为我已经有了一个事件设置，但是我需要通过一些其他的用户交互来触发它。。。就像，在页面加载时，这个按钮应该执行它的触发器，从而运行它存储的任何动画。。。