javascript event在FF和IE的兼容传参心得(绝对好用)

前端技术 2023/09/05 JavaScript

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>

本文地址：https://www.stayed.cn/item/12333

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案