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

 更新时间:2016年08月11日 08:56:47   投稿:jingxian  
下面小编就为大家带来一篇原生态js,鼠标按下后,经过了那些单元格的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

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

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

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

相关文章

  • vant倒序年月日期组件封装实例详解

    vant倒序年月日期组件封装实例详解

    这篇文章主要介绍了vant倒序年月日期组件封装实例详解,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2024-03-03
  • javascript 具名函数的四种调用方式 推荐

    javascript 具名函数的四种调用方式 推荐

    看四种方式执行结果没有区别。但如果函数有返回值的话,用new方式调用时可能会让你有些失望。
    2009-07-07
  • JS双向链表实现与使用方法示例(增加一个previous属性实现)

    JS双向链表实现与使用方法示例(增加一个previous属性实现)

    这篇文章主要介绍了JS双向链表实现与使用方法,在之前链表的基础上增加一个previous属性实现的双向链表功能,需要的朋友可以参考下
    2019-01-01
  • JS 俄罗斯方块完美注释版代码

    JS 俄罗斯方块完美注释版代码

    JS俄罗斯方块完美注释版 v 1.01 从学c语言那一会儿都想写一个俄罗斯方块,可是每次动起手总觉得难度太大. 今天终于用了大约4个小时写出来了. 其中在涉及到方块变型的时候还咨询了
    2008-11-11
  • JS 用6N±1法求素数 实例教程

    JS 用6N±1法求素数 实例教程

    显然,当N≥1时,6N,6N+2,6N+3,6N+4都不是素数,只有形如6N+1和6N+5的自然数有可能是素数。所以,除了2和3之外,所有的素数都可以表示成6N±1的形式(N为自然数)。
    2009-10-10
  • 详解微信小程序-获取用户session_key,openid,unionid - 后端为nodejs

    详解微信小程序-获取用户session_key,openid,unionid - 后端为nodejs

    这篇文章主要介绍了微信小程序获取session_key,openid,unionid的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • window.open()实现post传递参数

    window.open()实现post传递参数

    本文主要向大家介绍了如何使用window.open()实现post传递参数的方法,思路是参考的一位网友的,然后根据自己的项目需求做了些调整,这里同样分享给大家,希望对大家能够有所帮助。
    2015-03-03
  • JS常见DOM节点操作示例【创建 ,插入,删除,复制,查找】

    JS常见DOM节点操作示例【创建 ,插入,删除,复制,查找】

    这篇文章主要介绍了JS常见DOM节点操作,结合实例形式分析了JavaScript针对DOM节点的创建 ,插入,删除,复制,查找等操作相关函数与使用技巧,需要的朋友可以参考下
    2018-05-05
  • JS数组方法concat()用法实例分析

    JS数组方法concat()用法实例分析

    这篇文章主要介绍了JS数组方法concat()用法,结合实例形式分析了JS数组concat()方法具体功能、用法及操作注意事项,需要的朋友可以参考下
    2020-01-01
  • JS简单随机数生成方法

    JS简单随机数生成方法

    这篇文章主要介绍了JS简单随机数生成方法,通过javascript自定义函数演示了随机数的生成方法,需要的朋友可以参考下
    2016-09-09

最新评论