Home > Article > Web Front-end > Experience on compatibility of javascript event in FF and IE (absolutely easy to use)_javascript skills

Experience on compatibility of javascript event in FF and IE (absolutely easy to use)_javascript skills

WBOYOriginal: 2016-05-16 16:42:201439browse

Event is not compatible with IE and FF. I encountered some problems in passing parameters today. I refer to some methods on the Internet and gained some experience:

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

================================================== ============================

Attached is the practice code

<!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>

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：JS method to loop through JSON data_javascript skillsNext article：JS method to loop through JSON data_javascript skills

See more

Experience on compatibility of javascript event in FF and IE (absolutely easy to use)_javascript skills

Related articles