safari浏览器实现模拟click点击事件

在项目中经常会用到onclick点击事件触发效果，如给button按钮添加一个点击事件：

<button id="btn">点我</button>
<script>
var btn = document.getElementById("btn");
btn.onclick = function(){
alert("终于点我了！");
}
</script>

然而有时候我们希望在用户没有手动点击的情况下就触发点击事件（即想要执行点击事件的回调函数），这时只需调用一个click()方法：

btn.click();

这时不用等待用户真的点击就可以实现效果了，并且几乎所有浏览器都是支持的。

但是如果将上面的button标签改为div，其他的都不变，在safari浏览器中就不能自动触发点击事件了。其实只有input/button元素是在所有浏览器都具有click方法，而其他的元素就不一定了。

那要怎么在不支持的浏览器中实现这种效果呢？我们可以用dispatchEvent来实现，如下：

<div id="div1" onclick="alert(3)">点我点我</div>
<script>
function dispatch(dom, type){
try{
var evt = document.createEvent('Event');
evt.initEvent(type,true,true);
dom.dispatchEvent(evt);
}catch(e){alert(e)};
}
var div1= document.getElementById('div1');
dispatch(div1, 'click');
</script>

上面的实现方式让你能明白浏览器的差异。在实际实现这个效果时可以直接判断元素是否具有click方法即可，Safari/Chrome中非input/button元素没有click方法，返回undefined。

<div id="div1" onclick="alert(3)">点我点我</div>
<script>
function dispatch(dom){
if(dom.click){
dom.click();
}else{
try{
var evt = document.createEvent('Event');
evt.initEvent("click",true,true);
dom.dispatchEvent(evt);
}catch(e){alert(e)};
}
}
var div1= document.getElementById('div1');
dispatch(div1);

特性判断有更好的前瞻性，比如Safari/Chrome在后续版本中实现了非input/button元素的click方法，那么特性判断的函数仍然可以向下兼容。