Javascript event is absolutely great for FF and IE with the compatibility of of

2020-03-30 03:32:16
OfStack

Event is not compatible with IE and FF. Today, I encountered some problems in uploading. Please refer to some methods on the Internet for my experience:


aClassArray[i].onmouseover = function () { //Code directly written in it is possible, to pass parameters can also be passed, but it is not convenient to reuse};

aClassArray[i].onmouseover =linkMouseover//Don't preach and can be used under the condition of but later can't use the arguments. The callee. Caller. The arguments [0]

aClassArray[i].onmouseover =linkMouseover()//Parenthesis is an error

aClassArray[i].onmouseover = function () { linkMouseover(this) };//this It goes in, yes alert Come out, but evt.clientX + "px" There's a problem. It's empty...  arguments.callee.caller.arguments[0]// You can solve it with this 

var src = evt.srcElement || evt.target; // Follow-up can also follow src

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

Attach the exercise 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": " Prompt of baidu website ",
"163": "163 Website prompt ",
"google": "google Website prompt "
}
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]; //Get the event object
divTips.className = "divTips";
divTips.style.left = evt.clientX + "px";//FF + px compatibility
divTips.style.top = evt.clientY + "px";//FF + px compatibility
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"> baidu </a>
<br />
<br />
<br />
<a href="http://www.163.com" rel="external nofollow" class="aClass"> netease </a>
<br />
<br />
<br />
<a href="http://www.google.com" rel="external nofollow" class="aClass">Google</a>
</div>
</body>
</html>