元素綁定click點(diǎn)擊事件方法

更新時(shí)間：2015年06月08日 16:37:45 投稿：hebedich

當(dāng)點(diǎn)擊元素時(shí)，會(huì)發(fā)生 click 事件。當(dāng)鼠標(biāo)指針停留在元素上方，然后按下并松開(kāi)鼠標(biāo)左鍵時(shí)，就會(huì)發(fā)生一次 click。click() 方法觸發(fā) click 事件，或規(guī)定當(dāng)發(fā)生 click 事件時(shí)運(yùn)行的函數(shù)。

最簡(jiǎn)單的莫過(guò)于使用click方法：

<input id="btn" type="button" value="BUTTON" onclick="alert(1)"/>
<script>
 var btn = document.getElementById('btn');
 btn.click();
</script>

所有瀏覽器都彈出了1。但是如果把input換成div呢？

<div id="d1" style="background:gold;width:50px;height:50px;" onclick="alert(2)"></div>
<script>
 var d1 = document.getElementById('d1');
 d1.click();
</script>

這次Safari/Chrome中沒(méi)有彈出2。即不是所有瀏覽器中的所有元素都支持click方法。事實(shí)上只有input/button元素在所有瀏覽器才具有click方法。
以上的事件都是直接添加在html屬性中的（內(nèi)聯(lián)事件）。click方法能觸發(fā)使用el.onXXX/addEventListener/attachEvent添加的事件嗎？

<input id="btn1" type="button" value="BUTTON 1"/>
<input id="btn2" type="button" value="BUTTON 2"/>
<script>
 var addListener = window.addEventListener ?
   function(el, type, fn) { el.addEventListener(type, fn, false); } :
   function(el, type, fn) { el.attachEvent('on' + type, fn); };
 var btn1 = document.getElementById('btn1');
 var btn2 = document.getElementById('btn2');
 btn1.onclick = function(){
   alert(3);
 };
 addListener(btn2, 'click', function() {alert(4)});
 btn1.click();
 btn2.click();
</script>

所有瀏覽器都依次彈出了3,4。說(shuō)明支持click方法的元素，無(wú)論使用內(nèi)聯(lián)方式還是el.onXX又或addEventListener/attachEvent添加事件都能觸發(fā)。

click方法已經(jīng)寫入了HTML5草案，如果Safari/Chrome完成對(duì)剩下的元素的實(shí)現(xiàn)（非input/button）。那么模擬點(diǎn)擊將十分簡(jiǎn)單，直接調(diào)用click方法。Firefox也是剛剛在版本5中實(shí)現(xiàn)對(duì)非input/button元素的click方法實(shí)現(xiàn)，這點(diǎn)Safari/Chrome有些落后了。
既然Safari/Chrome中click不可用，我們就用dispatchEvent來(lái)實(shí)現(xiàn)了。

<input id="btn1" type="button" value="BUTTON 1" onclick="alert(1)"/>
<input id="btn2" type="button" value="BUTTON 2" onclick="alert(2)"/>
<div id="d1" style="background:gold;width:50px;height:50px;" onclick="alert(3)"></div>
<script>
 function dispatch(el, type){
   try{
     var evt = document.createEvent('Event');
     evt.initEvent(type,true,true);
     el.dispatchEvent(evt);
   }catch(e){alert(e)};
 }
 var btn1 = document.getElementById('btn1');
 var btn2 = document.getElementById('btn2');  
 var d1 = document.getElementById('d1');
 dispatch(btn1, 'click');
 dispatch(btn2, 'click');
 dispatch(d1, 'click');
</script>

依次彈出了1,2,3。換成其它事件添加方式亦可觸發(fā)。IE中還有個(gè)fireEvent去主動(dòng)觸發(fā)事件，當(dāng)然如果是點(diǎn)擊事件使用click更好。非點(diǎn)擊事件則只能通過(guò)fireEvent去觸發(fā)了。

最后給出我的triggerClick方法，實(shí)現(xiàn)方式判斷瀏覽器，判斷nodeName。依據(jù)是Safari/Chrome不支持非input/button元素的click方法。

function triggerClick( el ) {
 var nodeName = el.nodeName,
   safari_chrome = /webkit/.test(navigator.userAgent.toLowerCase());
 if(safari_chrome && (nodeName != 'INPUT' || nodeName != 'BUTTON')) {
   try{
     var evt = document.createEvent('Event');
     evt.initEvent('click',true,true);
     el.dispatchEvent(evt);
   }catch(e){alert(e)};
 }else{
   el.click();
 }
}

上面的實(shí)現(xiàn)方式讓你能明白瀏覽器的差異，但實(shí)現(xiàn)其實(shí)有點(diǎn)羅嗦。直接判斷元素是否具有click方法即可，Safari/Chrome中非input/button元素沒(méi)有click方法，返回undefined。

function triggerClick( el ) {
 if(el.click) {
   el.click();
 }else{
   try{
     var evt = document.createEvent('Event');
     evt.initEvent('click',true,true);
     el.dispatchEvent(evt);
   }catch(e){alert(e)};    
 }
}

特性判斷也比瀏覽器判斷有更好的前瞻性，比如Safari/Chrome在后續(xù)版本中實(shí)現(xiàn)了非input/button元素的click方法，那么特性判斷的函數(shù)仍然可以向下兼容。

以上所述就是本文的全部?jī)?nèi)容了，希望大家能夠喜歡

您可能感興趣的文章: