[原创]javascript 移动鼠标得到单元格所在table表中的rowIndex位置[兼容ie,firefox]
作者:bea
从cnblogs看到的代码,作者的代码随便不兼容firefox但,有助于大家学习为什么下面的代码兼容了firefox,大家可以对比下,有助于学习,对于更多的文章可以参考以前发布的文章。 <html> <head> <script language="javascript"> function mouseover(){ var ObjTd=window.event.srcElement; var ObjTr=ObjTd.parentEleme
从cnblogs看到的代码,作者的代码随便不兼容firefox但,有助于大家学习为什么下面的代码兼容了firefox,大家可以对比下,有助于学习,对于更多的文章可以参考以前发布的文章。
<html>
<head>
<script language="javascript">
function mouseover(){
var ObjTd=window.event.srcElement;
var ObjTr=ObjTd.parentElement;
var y=ObjTr.rowIndex;
var x=ObjTd.cellIndex;
alert(x+" "+y);
}
</script>
</head>
<body>
<table width="200" border="1">
<tr>
<td onclick="mouseover()"> </td>
<td onclick="mouseover()"> </td>
<td onclick="mouseover()"> </td>
</tr>
<tr>
<td onclick="mouseover()"> </td>
<td onclick="mouseover()"> </td>
<td onclick="mouseover()"> </td>
</tr>
<tr>
<td onclick="mouseover()"> </td>
<td onclick="mouseover()"> </td>
<td onclick="mouseover()"> </td>
</tr>
</table>
</body>
</html>
[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行]
下面的代码是修改的兼容firefox的代码
<html>
<head>
<script language="javascript">
function mouseover(e){
e=window.event?window.event:e;
var ObjTd=e.srcElement?e.srcElement:e.target;
var ObjTr=ObjTd.parentNode;
var y=ObjTr.rowIndex;
var x=ObjTd.cellIndex;
alert(x+" "+y);
}
</script>
</head>
<body>
<table width="200" border="1">
<tr>
<td onclick="mouseover(arguments[0])"> </td>
<td onclick="mouseover(arguments[0])"> </td>
<td onclick="mouseover(arguments[0])"> </td>
</tr>
<tr>
<td onclick="mouseover(arguments[0])"> </td>
<td onclick="mouseover(arguments[0])"> </td>
<td onclick="mouseover(arguments[0])"> </td>
</tr>
<tr>
<td onclick="mouseover(arguments[0])"> </td>
<td onclick="mouseover(arguments[0])"> </td>
<td onclick="mouseover(arguments[0])"> </td>
</tr>
</table>
</body>
</html>
[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行]
主要区别如下:
1.事件e.srcElement与e.target
经常有人问 firefox 下的 event.srcElement 怎么用,在此详细说明:
IE下,event对象有srcElement属性,但是没有target属性;Firefox下,event对象有target属性,但是没有srcElement属性.但他们的作用是相当的,即:
firefox 下的 event.target = IE 下的 event.srcElement
解决方法:使用obj(obj = event.srcElement ? event.srcElement : event.target;)来代替IE下的event.srcElement或者Firefox下的event.target.
2.parentNode与parentElement的区别
使用parentElement时在FF下无效,搜索一下才知道parentElement它是IE专用的,IE多年的霸主地位造成现在不少应用中无法与其他浏览器兼容的问题,标准化真的很重要,呵呵,一定要向Web标准看齐哦
有用 | 无用
<html>
<head>
<script language="javascript">
function mouseover(){
var ObjTd=window.event.srcElement;
var ObjTr=ObjTd.parentElement;
var y=ObjTr.rowIndex;
var x=ObjTd.cellIndex;
alert(x+" "+y);
}
</script>
</head>
<body>
<table width="200" border="1">
<tr>
<td onclick="mouseover()"> </td>
<td onclick="mouseover()"> </td>
<td onclick="mouseover()"> </td>
</tr>
<tr>
<td onclick="mouseover()"> </td>
<td onclick="mouseover()"> </td>
<td onclick="mouseover()"> </td>
</tr>
<tr>
<td onclick="mouseover()"> </td>
<td onclick="mouseover()"> </td>
<td onclick="mouseover()"> </td>
</tr>
</table>
</body>
</html>
[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行]
下面的代码是修改的兼容firefox的代码
<html>
<head>
<script language="javascript">
function mouseover(e){
e=window.event?window.event:e;
var ObjTd=e.srcElement?e.srcElement:e.target;
var ObjTr=ObjTd.parentNode;
var y=ObjTr.rowIndex;
var x=ObjTd.cellIndex;
alert(x+" "+y);
}
</script>
</head>
<body>
<table width="200" border="1">
<tr>
<td onclick="mouseover(arguments[0])"> </td>
<td onclick="mouseover(arguments[0])"> </td>
<td onclick="mouseover(arguments[0])"> </td>
</tr>
<tr>
<td onclick="mouseover(arguments[0])"> </td>
<td onclick="mouseover(arguments[0])"> </td>
<td onclick="mouseover(arguments[0])"> </td>
</tr>
<tr>
<td onclick="mouseover(arguments[0])"> </td>
<td onclick="mouseover(arguments[0])"> </td>
<td onclick="mouseover(arguments[0])"> </td>
</tr>
</table>
</body>
</html>
[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行]
主要区别如下:
1.事件e.srcElement与e.target
经常有人问 firefox 下的 event.srcElement 怎么用,在此详细说明:
IE下,event对象有srcElement属性,但是没有target属性;Firefox下,event对象有target属性,但是没有srcElement属性.但他们的作用是相当的,即:
firefox 下的 event.target = IE 下的 event.srcElement
解决方法:使用obj(obj = event.srcElement ? event.srcElement : event.target;)来代替IE下的event.srcElement或者Firefox下的event.target.
2.parentNode与parentElement的区别
使用parentElement时在FF下无效,搜索一下才知道parentElement它是IE专用的,IE多年的霸主地位造成现在不少应用中无法与其他浏览器兼容的问题,标准化真的很重要,呵呵,一定要向Web标准看齐哦
有用 | 无用
猜你喜欢
您可能感兴趣的文章:
- js控制div及网页相关属性的代码
- jQuery 淡入淡出、展开收缩菜单实现代码
- JQuery Tips(4) 一些关于提高JQuery性能的Tips
- JS 在数组插入字符的实现代码(可参考JavaScript splice() 方法)
- JS 的应用开发初探(mootools)
- 用js实现层随着内容大小动态渐变改变 推荐
- javascript demo 基本技巧
- javascript option onclick事件ie解决方案 兼容ie,firefox
- IE和Firefox下event事件杂谈
- div+css+js模拟tab切换效果 事件绑定 IE,firefox兼容
- 替代window.event.srcElement效果的可兼容性的函数
- JavaScript 序列化对象实现代码
- 让div层随鼠标移动的实现代码 ie ff
- Javascript 多浏览器兼容性问题及解决方案
- Javascript在IE或Firefox下获取鼠标位置的代码
- javascript DOM操作之动态删除TABLE多行
- javascript 导出数据到Excel(处理table中的元素)
- event.srcElement 用法笔记e.target
- javascript获得光标所在的文本框(text/textarea)中的位置