下面小编就为大家带来一篇原生态 js, 鼠标按下后, 经过了那些单元格的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本来是要判断那些单元格被选中,结果发现行不通,只能判断鼠标按下后,经过了那些单元格
之所以发出来,是觉得案例还有很多有意思的地方
onmouseover 的持续触发,导致了很多重复元素
由于将事件绑定在整个 table 上,还出现了 undefined
鼠标的反复进入进出,会导致相同元素的断断续续的重复,
如何解决他们!
- <table border="1" id="dnf">
- <tr>
- <td rowspan="2">
- 2
- </td>
- <td>
- 2
- </td>
- <td>
- 4
- </td>
- </tr>
- <tr>
- <td>
- 2
- </td>
- <td>
- 4
- </td>
- </tr>
- </table>
- window.onload = function()
- {
- var flag = false;<BR>//当鼠标被按下时,为true,放开是为true
- var indexs =[];<BR>//用来存放鼠标经过的单元格在整个表格的位置,鼠标按下时被初始化,
- dnf.onmousedown = function()
- {
- flag = true;
- indexs = [];
- }
- dnf.onmousemove = function(e)
- {
- if(flag)//只有鼠标被按下时,才会执行复合代码
- {
- indexs.push(search(e.target,dnf.getElementsByTagName("td")))
- }
- }
- dnf.onmouseup = function()
- {
- flag = false;
- deleteUndefined();//由于会经过边框,所以会出现null元素
- deleteRepaint();//由于onmouseover不会只触发一次,且我们选择是可能反复经过一个单元格
- alert(indexs);
- }
- function deleteRepaint()
- {
- for(var j=0;j<indexs.length;j++)//保证第j个元素是唯一的
- {
- var head = indexs[j];
- for(var i=j+1;i<indexs.length;i++)//删除与第j个重复的
- {
- if(head == indexs[i])
- {
- indexs.splice(i,1);
- i--;
- }
- }
- }
- }
- function deleteUndefined()
- {
- for(var i=0;i<indexs.length;i++)
- {
- if(typeof indexs[i] == "undefined")
- {
- indexs.splice(i,1);
- i--;
- }
- }
- }
- function search(a,A)
- {
- var length = A.length;
- for(var i=0;i<length;i++)
- {
- if(a == A[i])
- {
- return i;
- }
- }
- }
- }
- </script>
以上这篇原生态 js, 鼠标按下后, 经过了那些单元格的简单实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持 phperz。
来源: http://www.phperz.com/article/17/0320/263656.html