javascript event在FF和IE的兼容传参心得(绝对好用)
更新时间：2014年07月10日 17:38:24 投稿：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函数无法使用的解决方法
相关文章
这篇文章主要介绍了JavaScript检查数字是否为整数或浮点数的方法,涉及javascript类型判断的相关技巧,需要的朋友可以参考下2015-06-06
两种方法的不同之处在于控件隐藏后是否还在页面上占位，详细的示例代码如下，大家可以感受下2013-10-10
在Chrome DevTools中调试JavaScript的实现
这篇文章主要介绍了在Chrome DevTools中调试JavaScript的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-04-04
EXTJS GRID 中单击行和单元格获得行或者单元格的内容(数据),本文将整理此功能的应用，需要了解的朋友可以参考下2012-11-11
下面小编就为大家带来一篇js实现楼层效果的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-07-07
这篇文章主要介绍了js实现仿爱微网两级导航菜单效果代码,通过javascript自定义函数结合鼠标点击事件实现tab切换的功能,具有一定参考借鉴价值,需要的朋友可以参考下2015-08-08
这篇文章主要为大家介绍了JS前端一千万条弹幕数据循环优化示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
pureClearButton是一款基于Bootstrap的非常实用的用于清空和重置input输入框内容的jQuery按钮插件，感兴趣的小伙伴们可以参考一下2016-05-05
下面小编就为大家带来一篇JS之相等操作符详解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-09-09
一个不用onmouseup的拖动函数...2007-05-05
最新评论