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>
赞 (0)

相关推荐

  • JavaScript在IE和FF下的兼容性问题

    长久以来JavaScript兼容性一直是Web开发者的一个主要问题.在正式规范.事实标准以及各种实现之间的存在的差异让许多开发者日夜煎熬.为此,主要从以下几方面差异总结IE和Firefox的Javascript兼容性: 复制代码 代码如下: 一.函数和方法差异:二.样式访问和设置:三.DOM方法及对象引用:四.事件处理:五.其他差异的兼容处理. 一.函数和方法差异 1. getYear()方法 [分析说明]先看一下以下代码: 复制代码 代码如下: var year= new Date().get

  • javascript:FF/Chrome与IE动态加载元素的区别说明

    javascript:FF/Chrome与IE动态加载元素的区别说明

    复制代码 代码如下: <!doctype html><html><head> <title>ff 与 ie 动态加载元素的区别</title> <script type="text/javascript" src="jquery-1.4.4.min.js"></script> <style type="text/css">  li{margin:0;p

  • IE6中链接A的href为javascript协议时不在当前页面跳转

    切页面时有时用链接A来替代按钮,这样做有几个好处 鼠标放上时默认有手状效果(不用添加cursor:pointer) 可以添加低版本IE都支持的伪类 如果点击时页面要整体刷新,即跳转,这时IE6则不尽人意,如下 复制代码 代码如下: <p><a href="javascript:;" onclick="jumpSina()">Sina</a></p> <p><a href="javascrip

  • asp cookie中文Javascript取得中文cookie

    思路:将中文编码改成UTF-8编码格式,传到前台,再用JS将其解码. 具体做法:将设置cookie的相关代码改为: Server.URLEncode("中文") 将获取cookie的相关JS代码改为: 复制代码 代码如下: var tmp=document.cookie.split(";")[0].split("=")[1];   var name= decodeURIComponent (tmp);

  • JavaScript对IE操作的经典代码(推荐)

    这段时间一直在用ajax技术做东东,所以也就有更多机会对JavaScript知识进行学习.之前在网上搜集了一些关于JavaScript对IE操作的代码(具体在哪里cope的记不清了,所以出处就不加了),感觉在开发过程中很有用,当然只适用于IE,FF会有问题的.现在贴出来分享. 复制代码 代码如下: 1.将彻底屏蔽鼠标右键oncontextmenu="window.event.returnvalue=false"可用于Table<table oncontextmenu=return

  • IE8中使用javascript动态加载CSS的解决方法

    众所周知做前端开发的都恨不得踹IE开发者几脚,IE开发者名声之差不低于GFW开发者,昧着良心搞坏市场,人人得而诛之,但是在中国这些地方市场占有率摆在那里,没办法只能向现实低头. 最近我们产品需要在浏览器里动态载入一段CSS,以前的代码是直接用的: 复制代码 代码如下: var bubbleCss = document.createElement('style');bubbleCss.type = 'text/css';bubbleCss.innerHTML = blc_conf.bubbleSt

  • javascript在IE下trim函数无法使用的解决方法

    本文实例分析了javascript在IE下trim函数无法使用的解决方法,对于web前段设计有一定的借鉴价值.具体分析如下: 首先,javascript的trim函数在firefox下面使用没有问题: <script language="javascript"> var test1 = " aa "; test1 = test1.toString(); test1 = test1.trim(); </script> 在火狐下这样用没有问题,

  • IE与FF下javascript获取网页及窗口大小的区别详解

    IE与FF下javascript获取网页及窗口大小的区别详解

    在新定义出来的标准下 document.documentElement.clientHeight在IE和火狐里都能获取正确值,下面一篇文章详细介绍了获取各种浏览器可见窗口大小这方面的差别: <script language="javascript">function getInfo(){    var s = "";    s += " 网页可见区域宽:"+ document.body.clientWidth;    s += &qu

  • 兼容最新firefox、chrome和IE的javascript图片预览实现代码

    兼容最新firefox、chrome和IE的javascript图片预览实现代码

    javascript实现客户端file选择文件后img标签加载客户端图片实现图片预览. 测试浏览器:firefox6,firefox12,chrome 25.0.1364.172 m,IE6-IE10 都兼容 safari5.0.4不支持FileReader和file.files.item(0).getAsDataURL方法,暂时无解,需要上传到服务器后返回临时文件名用img标签加载,不知道后续的safari版本是否支持FileReader对象. IE10下效果: IE9下效果: 实现源代码:

  • JavaScript的常见兼容问题及相关解决方法(chrome/IE/firefox)

    首先这里声明一下,关于我测试浏览器的版本是chrome15.0.874.121 Firefox 8.01 IE9 IETester 下面的代码关于声明 1:获得滚动条的情况 复制代码 代码如下: function getScroll(){        var t, l, w, h; if (document.documentElement && document.documentElement.scrollTop) {            t = document.documentEl

  • JavaScript中一个奇葩的IE浏览器判断方法

    记得在网上Down的很多源码用的最多的一种方式就是: 复制代码 代码如下: var ie = document.all(); 这是因为IE浏览器的document下有all方法,而所谓的标准浏览器却没有,所以很长的一段时间,这个是一种非常普遍的方法.在之后大家开始追求起简短,就像在这之后一度流行的一种方法: 复制代码 代码如下: var ie = ! + "\v1"; 这个是利用IE不支持垂直制表符的特性而判别的,仅仅7个字符已经很让人震惊了,可是这个记录被一个俄国人在今年早些的时候打

随机推荐