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


Posted in Javascript onAugust 11, 2016

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

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

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

Javascript 相关文章推荐
js表格分页实现代码
Sep 18 Javascript
jQuery遍历Table应用示例
Apr 09 Javascript
javascript多行字符串的简单实现方式
May 04 Javascript
JavaScript编写连连看小游戏
Jul 07 Javascript
JavaScript基于自定义函数判断变量类型的实现方法
Nov 23 Javascript
jQuery 开发之EasyUI 添加数据的实例
Sep 26 jQuery
vue 1.x 交互实现仿百度下拉列表示例
Oct 21 Javascript
CSS3结合jQuery实现动画效果及回调函数的实例
Dec 27 jQuery
微信小程序适配iphoneX的实现方法
Sep 18 Javascript
JS异步执行结果获取的3种解决方式
Feb 19 Javascript
element-ui多文件上传的实现示例
Apr 10 Javascript
js图数据结构处理 迪杰斯特拉算法代码实例
Sep 11 Javascript
vue分页组件table-pagebar使用实例解析
Nov 15 #Javascript
使用BootStrap实现用户登录界面UI
Aug 10 #Javascript
基于JSON格式数据的简单jQuery幻灯片插件(jquery-slider)
Aug 10 #Javascript
BootStrap Typeahead自动补全插件实例代码
Aug 10 #Javascript
BootStrap中Datepicker控件带中文的js文件
Aug 10 #Javascript
JS获取鼠标选中的文字
Aug 10 #Javascript
浅析JavaScript函数的调用模式
Aug 10 #Javascript
You might like
php adodb连接mssql解决乱码问题
2009/06/12 PHP
解析二进制流接口应用实例 pack、unpack、ord 函数使用方法
2013/06/18 PHP
手把手教你打印出PDF(关于fpdf的简单应用)
2013/06/25 PHP
PHP之APC缓存详细介绍 apc模块安装
2014/01/13 PHP
PHP编程中的常见漏洞和代码实例
2014/08/06 PHP
PHP根据两点间的经纬度计算距离
2014/10/31 PHP
通过源码解析Laravel的依赖注入
2018/01/22 PHP
JavaScript 中的replace方法说明
2007/04/13 Javascript
jQuery Mobile 导航栏代码
2013/11/01 Javascript
Egret引擎开发指南之创建项目
2014/09/03 Javascript
jQuery多媒体插件jQuery Media Plugin使用详解
2014/12/19 Javascript
js获取对象、数组的实际长度,元素实际个数的实现代码
2016/06/08 Javascript
jQuery实现联动下拉列表查询框
2017/01/04 Javascript
使用 NodeJS+Express 开发服务端的简单介绍
2017/04/07 NodeJs
Angular2监听页面大小变化的解决方法
2017/10/09 Javascript
Node.js中的cluster模块深入解读
2018/06/11 Javascript
JS实现select选中option触发事件操作示例
2018/07/13 Javascript
[48:41]VP vs VG Supermajor小组赛 B组胜者组决赛 BO3 第二场 6.2
2018/06/03 DOTA
Python获取文件ssdeep值的方法
2014/10/05 Python
归纳整理Python中的控制流语句的知识点
2015/04/14 Python
下载python中Crypto库报错:ModuleNotFoundError: No module named ‘Crypto’的解决
2018/04/23 Python
pyqt5 comboBox获得下标、文本和事件选中函数的方法
2019/06/14 Python
python库skimage给灰度图像染色的方法示例
2020/04/27 Python
python一些性能分析的技巧
2020/08/30 Python
Ubuntu配置Pytorch on Graph (PoG)环境过程图解
2020/11/19 Python
python 图像增强算法实现详解
2021/01/24 Python
美容师的职业规划书
2013/12/27 职场文书
大学生军训自我鉴定
2014/02/12 职场文书
大学新闻系求职信
2014/06/03 职场文书
抗洪救灾标语
2014/10/08 职场文书
幼师大班个人总结
2015/02/13 职场文书
酒店宣传语大全
2015/07/13 职场文书
运动会加油稿
2015/07/22 职场文书
2017元旦、春节期间廉洁自律承诺书
2016/03/25 职场文书
一篇文章弄懂Python中的内建函数
2021/08/07 Python
Django基础CBV装饰器和中间件
2022/03/22 Python