无为清净楼资源网 Design By www.qnjia.com
最简单的莫过于使用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 "htmlcode"><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方法,那么特性判断的函数仍然可以向下兼容。
以上所述就是本文的全部内容了,希望大家能够喜欢
标签:
click点击事件
无为清净楼资源网 Design By www.qnjia.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
无为清净楼资源网 Design By www.qnjia.com
暂无评论...
更新日志
2024年11月20日
2024年11月20日
- 柏菲·珞叔作品集《金色大厅2》限量开盘母带ORMCD[低速原抓WAV+CUE]
- Gareth.T《sad songs(Explicit)》[320K/MP3][29.03MB]
- Gareth.T《sad songs(Explicit)》[FLAC/分轨][152.85MB]
- 证声音乐图书馆《海风摇曳·盛夏爵士曲》[320K/MP3][63.06MB]
- 龚玥《金装龚玥HQCD》头版限量[WAV分轨]
- 李小春《吻别》萨克斯演奏经典[原抓WAV+CUE]
- 齐秦《辉煌30年24K珍藏版》2CD[WAV+CUE]
- 证声音乐图书馆《海风摇曳·盛夏爵士曲》[FLAC/分轨][321.47MB]
- 群星 《世界经典汽车音乐》 [WAV分轨][1G]
- 冷漠.2011 《冷漠的爱DSD》[WAV+CUE][1.2G]
- 陈明《流金岁月精逊【中唱】【WAV+CUE】
- 群星《Jazz-Ladies1-2爵士女伶1-2》HQCD/2CD[原抓WAV+CUE]
- 群星《美女私房歌》(黑胶)[WAV分轨]
- 郑源.2009《试音天碟》24BIT-96KHZ[WAV+CUE][1.2G]
- 飞利浦试音碟 《环球群星监听录》SACD香港版[WAV+CUE][1.1G]