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方法，那么特性判断的函数仍然可以向下兼容。