首页 > 编程 > JavaScript > 正文

原生态js,鼠标按下后,经过了那些单元格的简单实例

2019-11-20 09:15:51
字体:
来源:转载
供稿:网友

本来是要判断那些单元格被选中,结果发现行不通,只能判断鼠标按下后,经过了那些单元格

之所以发出来,是觉得案例还有很多有意思的地方

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,鼠标按下后,经过了那些单元格的简单实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持武林网。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表