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 相关文章推荐
利用javascript查看html源文件
Nov 08 Javascript
jQuery EasyUI API 中文文档 - MenuButton菜单按钮使用介绍
Oct 06 Javascript
用js实现小球的自由移动代码
Apr 22 Javascript
javascript实现框架高度随内容改变的方法
Jul 23 Javascript
jquery实现鼠标滑过后动态图片提示效果实例
Aug 10 Javascript
JS中把函数作为另一函数的参数传递方法(总结)
Jun 28 Javascript
Vim快速合并行及vim 将文件所有行合并到一行
Nov 27 Javascript
vue  directive定义全局和局部指令及指令简写
Nov 20 Javascript
angular4中引入echarts的方法示例
Jan 29 Javascript
Vue之beforeEach非登录不能访问的实现(代码亲测)
Jul 18 Javascript
vue cli4下环境变量和模式示例详解
Apr 09 Javascript
vue-router之解决addRoutes使用遇到的坑
Jul 19 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
一个简单php扩展介绍与开发教程
2010/08/19 PHP
php生成略缩图代码
2012/07/16 PHP
php笔记之:php数组相关函数的使用
2013/04/26 PHP
在Mac OS上搭建Nginx+PHP+MySQL开发环境的教程
2015/12/21 PHP
PHP下 Mongodb 连接远程数据库的实例代码
2017/08/30 PHP
PHP排序算法之简单选择排序(Simple Selection Sort)实例分析
2018/04/20 PHP
PHP递归的三种常用方式
2019/02/28 PHP
极酷的javascirpt,让你随意编辑任何网页
2007/02/25 Javascript
javascript 一个函数对同一元素的多个事件响应
2009/07/25 Javascript
简述AngularJS相关的一些编程思想
2015/06/23 Javascript
基于javascript简单实现对身份证校验
2021/01/25 Javascript
JS日程管理插件FullCalendar简单实例
2017/02/07 Javascript
Vuejs 单文件组件实例详解
2018/02/09 Javascript
jQuery基于闭包实现的显示与隐藏div功能示例
2018/06/09 jQuery
关于JavaScript中高阶函数的魅力详解
2018/09/07 Javascript
vue.js中proxyTable 转发请求的实现方法
2018/09/20 Javascript
详解nvm管理多版本node踩坑
2019/07/26 Javascript
针对Vue路由history模式下Nginx后台配置操作
2020/10/22 Javascript
[38:51]2014 DOTA2国际邀请赛中国区预选赛 Orenda VS LGD-CDEC
2014/05/22 DOTA
Python科学计算之Pandas详解
2017/01/15 Python
Python计算两个日期相差天数的方法示例
2017/05/23 Python
Python 中PyQt5 点击主窗口弹出另一个窗口的实现方法
2019/07/04 Python
Django框架之登录后自定义跳转页面的实现方法
2019/07/18 Python
python 自定义装饰器实例详解
2019/07/20 Python
python3 批量获取对应端口服务的实例
2019/07/25 Python
python 实现人和电脑猜拳的示例代码
2020/03/02 Python
python属于跨平台语言码
2020/06/09 Python
10张动图学会python循环与递归问题
2021/02/06 Python
锐步美国官方网站:Reebok美国
2018/01/10 全球购物
基督教卡片、励志礼品、家居装饰等:DaySpring
2018/10/12 全球购物
寄语十八大感言
2014/02/07 职场文书
施工员岗位职责
2014/03/16 职场文书
收款委托书范本
2014/09/11 职场文书
干部作风建设年活动剖析材料
2014/10/23 职场文书
国庆节主题班会
2015/08/15 职场文书
Vue2.0搭建脚手架
2022/03/13 Vue.js