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