模拟元素点击的几种方式
来源:广州中睿信息技术有限公司官网
发布时间:2012/10/21 23:25:16 编辑:admin 阅读 533
最简单的莫过于使用click方法<inputid="btn"type="button"value="BUTTON"onclick="alert(1)"/><script>varbtn

最简单的莫过于使用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中没有弹出2。

不是所有浏览器中的所有元素都支持click方法。事实上只有input/button元素在所有浏览器才具有click方法。

以上的事件都是直接添加在html属性中的(内联事件)。click方法能触发使用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。

说明支持click方法的元素,无论使用内联方式还是el.onXX又或addEventListener/attachEvent添加事件都能触发。

click方法已经写入了HTML5草案,如果Safari/Chrome完成对剩下的元素的实现(非input/button)。那么模拟点击将十分简单,直接调用click方法。Firefox也是刚刚在版本5中实现对非input/button元素的click方法实现,这点Safari/Chrome有些落后了。

既然Safari/Chrome中click不可用, 我们就用dispatchEvent来实现了。

<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。换成其它事件添加方式亦可触发。

IE中还有个fireEvent去主动触发事件,当然如果是点击事件使用click更好。非点击事件则只能通过fireEvent去触发了。

最后给出我的triggerClick方法,实现方式判断浏览器,判断nodeName。依据是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();   }  }  

上面的实现方式让你能明白浏览器的差异,但实现其实有点罗嗦。直接判断元素是否具有click方法即可,Safari/Chrome中非input/button元素没有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在后续版本中实现了非input/button元素的click方法,那么特性判断的函数仍然可以向下兼容。

联系我们CONTACT 扫一扫
愿景:成为最专业的软件研发服务领航者
中睿信息技术有限公司 广州•深圳 Tel:020-38931912 务实 Pragmatic
广州:广州市天河区翰景路1号金星大厦18层中睿信息 Fax:020-38931912 专业 Professional
深圳:深圳市福田区车公庙有色金属大厦509~510 Tel:0755-25855012 诚信 Integrity
所有权声明:PMI, PMP, Project Management Professional, PMI-ACP, PMI-PBA和PMBOK是项目管理协会(Project Management Institute, Inc.)的注册标志。
版权所有:广州中睿信息技术有限公司 粤ICP备13082838号-2