久久国产成人av_抖音国产毛片_a片网站免费观看_A片无码播放手机在线观看,色五月在线观看,亚洲精品m在线观看,女人自慰的免费网址,悠悠在线观看精品视频,一级日本片免费的,亚洲精品久,国产精品成人久久久久久久

搜索

QQ空間 QQ好友新浪微博微信

模擬元素點擊的幾種方式

woshishenxiande 2011-10-31

展開全文

最簡單的莫過于使用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中沒有彈出2,。

即不是所有瀏覽器中的所有元素都支持click方法,。事實上只有input/button元素在所有瀏覽器才具有click方法,。

以上的事件都是直接添加在html屬性中的（內聯事件）。click方法能觸發(fā)使用el.onXXX/addEventListener/attachEvent添加的事件嗎,？

01<input id="btn1" type="button" value="BUTTON 1"/>
02<input id="btn2" type="button" value="BUTTON 2"/>
03<script>
04    var addListener = window.addEventListener ?
05        function(el, type, fn) { el.addEventListener(type, fn, false); } :
06        function(el, type, fn) { el.attachEvent('on' + type, fn); };
07    var btn1 = document.getElementById('btn1');
08    var btn2 = document.getElementById('btn2');
09    btn1.onclick = function(){
10        alert(3);
11    };
12    addListener(btn2, 'click', function() {alert(4)});
13    btn1.click();
14    btn2.click();
15 
16</script>

所有瀏覽器都依次彈出了3,4,。

說明支持click方法的元素，無論使用內聯方式還是el.onXX又或addEventListener/attachEvent添加事件都能觸發(fā),。

click方法已經寫入了HTML5草案,，如果Safari/Chrome完成對剩下的元素的實現（非input/button）。那么模擬點擊將十分簡單,，直接調用click方法,。 Firefox也是剛剛在版本5中實現對非input/button元素的click方法實現,，這點Safari/Chrome有些落后了,。

既然Safari/Chrome中click不可用，我們就用dispatchEvent來實現了,。

01<input id="btn1" type="button" value="BUTTON 1" onclick="alert(1)"/>
02<input id="btn2" type="button" value="BUTTON 2" onclick="alert(2)"/>
03<div id="d1" style="background:gold;width:50px;height:50px;" onclick="alert(3)"></div>
04<script>
05    function dispatch(el, type){
06        try{
07            var evt = document.createEvent('Event');
08            evt.initEvent(type,true,true);
09            el.dispatchEvent(evt);
10        }catch(e){alert(e)};
11    }
12    var btn1 = document.getElementById('btn1');
13    var btn2 = document.getElementById('btn2');     
14    var d1 = document.getElementById('d1');
15    dispatch(btn1, 'click');
16    dispatch(btn2, 'click');
17    dispatch(d1, 'click');
18 
19</script>

依次彈出了1,2,3,。換成其它事件添加方式亦可觸發(fā)。

IE中還有個fireEvent去主動觸發(fā)事件,，當然如果是點擊事件使用click更好,。非點擊事件則只能通過fireEvent去觸發(fā)了。

最后給出我的triggerClick方法,，實現方式判斷瀏覽器,，判斷nodeName。依據是Safari/Chrome不支持非input/button元素的click方法,。

01function triggerClick( el ) {
02    var nodeName = el.nodeName,
03        safari_chrome = /webkit/.test(navigator.userAgent.toLowerCase());
04    if(safari_chrome && (nodeName != 'INPUT' || nodeName != 'BUTTON')) {
05        try{
06            var evt = document.createEvent('Event');
07            evt.initEvent('click',true,true);
08            el.dispatchEvent(evt);
09        }catch(e){alert(e)};
10    }else{
11        el.click();
12    }
13}

上面的實現方式讓你能明白瀏覽器的差異,，但實現其實有點羅嗦。直接判斷元素是否具有click方法即可,，Safari/Chrome中非input/button元素沒有click方法,，返回undefined。

01function triggerClick( el ) {
02    if(el.click) {
03        el.click();
04    }else{
05        try{
06            var evt = document.createEvent('Event');
07            evt.initEvent('click',true,true);
08            el.dispatchEvent(evt);
09        }catch(e){alert(e)};        
10    }
11}