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


Posted in Javascript onJuly 10, 2014

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>
Javascript 相关文章推荐
js实现简单模态窗口,背景灰显
Nov 14 Javascript
JavaScript delete操作符应用实例
Jan 13 Javascript
JavaScript检测弹出窗口是否已经关闭的方法
Mar 24 Javascript
javascript生成大小写字母
Jul 03 Javascript
JavaScript仿淘宝页面图片滚动加载及刷新回顶部的方法解析
May 24 Javascript
jquery validate表单验证插件
Sep 06 Javascript
bootstrap table实现单击单元格可编辑功能
Mar 28 Javascript
JavaScript创建对象_动力节点Java学院整理
Jun 27 Javascript
angularjs 动态从后台获取下拉框的值方法
Aug 13 Javascript
vue做移动端适配最佳解决方案(亲测有效)
Sep 04 Javascript
让webpack+vue-cil项目不再自动打开浏览器的方法
Sep 27 Javascript
Vue的Options用法说明
Aug 14 Javascript
js确认删除对话框适用于a标签及submit
Jul 10 #Javascript
JQuery1.8 判断元素是否绑定事件的方法
Jul 10 #Javascript
jquery实现类似EasyUI的页面布局可改变左右的宽度
Sep 12 #Javascript
借助JavaScript脚本判断浏览器Flash Player信息的方法
Jul 09 #Javascript
jQuery获取选中内容及设置元素属性的方法
Jul 09 #Javascript
js数组与字符串的相互转换方法
Jul 09 #Javascript
在Linux上用forever实现Node.js项目自启动
Jul 09 #Javascript
You might like
怎样辨别一杯好咖啡
2021/03/03 新手入门
PHP中error_reporting()函数的用法(修改PHP屏蔽错误)
2011/07/01 PHP
如何使用PHP获取指定日期所在月的开始日期与结束日期
2013/08/01 PHP
PHP批量生成静态HTML的简单原理和方法
2014/04/20 PHP
PHP实现的简单mock json脚本分享
2015/02/10 PHP
用js实现键盘方向键翻页功能的代码
2007/06/03 Javascript
基于jquery的tab切换 js原理
2010/04/01 Javascript
js修改table中Td的值(定义td的单击事件)
2013/01/10 Javascript
js写出遮罩层登陆框和对联广告并自动跟随滚动条滚动
2014/04/29 Javascript
JS实现可点击展开与关闭的左侧广告代码
2015/09/02 Javascript
javascript RegExp 使用说明
2016/05/21 Javascript
Java  Spring 事务回滚详解
2016/10/17 Javascript
nodejs处理图片的中间件node-images详解
2017/05/08 NodeJs
Node.js 使用流实现读写同步边读边写功能
2017/09/11 Javascript
探索Vue高阶组件的使用
2018/01/08 Javascript
用vue快速开发app的脚手架工具
2018/06/11 Javascript
vue实现的上拉加载更多数据/分页功能示例
2019/05/25 Javascript
使用vue实现HTML页面生成图片的方法
2020/03/12 Javascript
[03:56]还原FTP电影首映式 DOTA2群星拼出遗迹世界
2014/03/26 DOTA
详细介绍Python函数中的默认参数
2015/03/30 Python
Python文件读写常见用法总结
2019/02/22 Python
Python搭建HTTP服务过程图解
2019/12/14 Python
Python Excel vlookup函数实现过程解析
2020/06/22 Python
Python优秀开源项目Rich源码解析的流程分析
2020/07/06 Python
PyTorch 导数应用的使用教程
2020/08/31 Python
利用css3-animation实现逐帧动画效果
2016/03/10 HTML / CSS
数控技术与应用毕业生自荐信
2013/09/24 职场文书
机械电子工程毕业生自荐信
2013/11/23 职场文书
职业女性的职业规划
2014/03/04 职场文书
环保倡议书50字
2014/05/15 职场文书
加油口号大全
2014/06/13 职场文书
村级四风对照检查材料
2014/08/24 职场文书
小学趣味运动会加油稿
2014/09/25 职场文书
党支部组织生活会整改方案
2014/09/30 职场文书
在校证明模板
2015/06/17 职场文书
高三毕业感言
2015/07/30 职场文书