javascript event在FF和IE的兼容传参心得(绝对好用)
投稿:whsnow
event在IE和FF不兼,下面为大家分享的是javascript event在FF和IE的兼容传参心得,需要的朋友可以参考下
event在IE和FF不兼容,今天传参碰到些问题,参考网上的一些方法,有所心得:
aClassArray[i].onmouseover = function () { //代码直接写在里面是可以的,要传参也可以传,只是不方便复用 }; aClassArray[i].onmouseover =linkMouseover//不传参的情况下是可以用的,但后续不能用 arguments.callee.caller.arguments[0] aClassArray[i].onmouseover =linkMouseover()//加括号是错误用法 aClassArray[i].onmouseover = function () { linkMouseover(this) };//this能传进去,可以alert出来,但evt.clientX + "px"就出问题了,是空的。。。 arguments.callee.caller.arguments[0]//可以用这个解决 var src = evt.srcElement || evt.target; //后续还可以跟src
===========================================================================
附上练习代码
<!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="css/ui-lightness/jquery-ui-1.10.4.custom.css" rel="external nofollow" /> <script src="js/jquery-1.10.2.js"></script> <script src="js/jquery-ui-1.10.4.custom.js"></script> <style type="text/css"> .aClass, .aClass:visited { font-size: 36px; text-decoration: none; color: #0094ff; } .divTips { font-size: 20px; color: red; border: #f00 1px solid; position: absolute; width: 100px; height: 30px; } </style> <script type="text/javascript"> function initOnOver() { var titleTips = { "baidu": "百度网站提示", "163": "163网站提示", "google": "google网站提示" } var aTag = document.getElementsByTagName("a"); var aClassArray = []; for (var i = 0; i < aTag.length; i++) { if (aTag[i].className == "aClass") { aClassArray[aClassArray.length] = aTag[i]; } } for (var i = 0; i < aClassArray.length; i++) { var e; aClassArray[i].onmouseover = function () { linkMouseover() }; aClassArray[i].onmouseout = linkMouseout; } } function linkMouseover() { var divTips = document.createElement("div"); var evt = window.event || arguments.callee.caller.arguments[0]; // 获取event对象 divTips.className = "divTips"; divTips.style.left = evt.clientX + "px";//+px兼容FF divTips.style.top = evt.clientY + "px";//+px兼容FF divTips.innerHTML = "test"; document.getElementById("divA").appendChild(divTips); } function linkMouseout() { var divTag = document.getElementsByTagName("div"); for (var i = 0; i < divTag.length; i++) { if (divTag[i].className == "divTips") { document.getElementById("divA").removeChild(divTag[i]); } } } window.onload = initOnOver; </script> </head> <body> <div id="divA"> <a href="http://www.baidu.com" rel="external nofollow" class="aClass">百度</a> <br /> <br /> <br /> <a href="http://www.163.com" rel="external nofollow" class="aClass">网易</a> <br /> <br /> <br /> <a href="http://www.google.com" rel="external nofollow" class="aClass">Google</a> </div> </body> </html>
您可能感兴趣的文章:
- 兼容最新firefox、chrome和IE的javascript图片预览实现代码
- asp cookie中文Javascript取得中文cookie
- IE8中使用javascript动态加载CSS的解决方法
- IE6中链接A的href为javascript协议时不在当前页面跳转
- JavaScript在IE和FF下的兼容性问题
- JavaScript中一个奇葩的IE浏览器判断方法
- JavaScript对IE操作的经典代码(推荐)
- javascript:FF/Chrome与IE动态加载元素的区别说明
- IE与FF下javascript获取网页及窗口大小的区别详解
- JavaScript的常见兼容问题及相关解决方法(chrome/IE/firefox)
- javascript在IE下trim函数无法使用的解决方法