国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁(yè) > 語(yǔ)言 > JavaScript > 正文

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

2024-05-06 16:21:47
字體:
來(lái)源:轉(zhuǎn)載
供稿:網(wǎng)友

當(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方法:

 

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

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

 

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

這次Safari/Chrome中沒(méi)有彈出2。即不是所有瀏覽器中的所有元素都支持click方法。事實(shí)上只有input/button元素在所有瀏覽器才具有click方法。

以上的事件都是直接添加在html屬性中的(內(nèi)聯(lián)事件)。click方法能觸發(fā)使用el.onXXX/addEventListener/attachEvent添加的事件嗎?

 

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

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

click方法已經(jīng)寫(xiě)入了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)了。

 

 
  1. <input id="btn1" type="button" value="BUTTON 1" onclick="alert(1)"/> 
  2. <input id="btn2" type="button" value="BUTTON 2" onclick="alert(2)"/> 
  3. <div id="d1" style="background:gold;width:50px;height:50px;" onclick="alert(3)"></div> 
  4. <script> 
  5. function dispatch(el, type){ 
  6. try
  7. var evt = document.createEvent('Event'); 
  8. evt.initEvent(type,true,true); 
  9. el.dispatchEvent(evt); 
  10. }catch(e){alert(e)}; 
  11. var btn1 = document.getElementById('btn1'); 
  12. var btn2 = document.getElementById('btn2');  
  13. var d1 = document.getElementById('d1'); 
  14. dispatch(btn1, 'click'); 
  15. dispatch(btn2, 'click'); 
  16. dispatch(d1, 'click'); 
  17. </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方法。

 

 
  1. function triggerClick( el ) { 
  2. var nodeName = el.nodeName, 
  3. safari_chrome = /webkit/.test(navigator.userAgent.toLowerCase()); 
  4. if(safari_chrome && (nodeName != 'INPUT' || nodeName != 'BUTTON')) { 
  5. try
  6. var evt = document.createEvent('Event'); 
  7. evt.initEvent('click',true,true); 
  8. el.dispatchEvent(evt); 
  9. }catch(e){alert(e)}; 
  10. }else
  11. el.click(); 

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

 

 
  1. function triggerClick( el ) { 
  2. if(el.click) { 
  3. el.click(); 
  4. }else
  5. try
  6. var evt = document.createEvent('Event'); 
  7. evt.initEvent('click',true,true); 
  8. el.dispatchEvent(evt); 
  9. }catch(e){alert(e)};  

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

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

發(fā)表評(píng)論 共有條評(píng)論
用戶(hù)名: 密碼:
驗(yàn)證碼: 匿名發(fā)表

圖片精選

主站蜘蛛池模板: 会理县| 安徽省| 白朗县| 漳浦县| 巴里| 天水市| 垦利县| 吴川市| 乐平市| 余庆县| 泉州市| 曲周县| 茶陵县| 古浪县| 斗六市| 鹤壁市| 荣昌县| 华蓥市| 阿鲁科尔沁旗| 黔西| 芷江| 维西| 鲁甸县| 东明县| 临沂市| 永州市| 北安市| 张北县| 定结县| 海丰县| 长沙县| 石嘴山市| 垦利县| 合川市| 平安县| 昔阳县| 扬州市| 涞源县| 贡觉县| 荣成市| 锡林郭勒盟|