原生态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 相关文章推荐
javascript loadScript异步加载脚本示例讲解
Nov 14 Javascript
js中判断对象是否为空的三种实现方法
Dec 23 Javascript
JS面向对象基础讲解(工厂模式、构造函数模式、原型模式、混合模式、动态原型模式)
Aug 16 Javascript
原生的html元素选择器类似jquery选择器
Oct 15 Javascript
通过node-mysql搭建Windows+Node.js+MySQL环境的教程
Mar 01 Javascript
jQuery实现表格元素动态创建功能
Jan 09 Javascript
js鼠标跟随运动效果
Mar 11 Javascript
vue中如何使用ztree
Feb 06 Javascript
vue实现动态按钮功能
May 13 Javascript
微信小程序实现左侧滑栏过程解析
Aug 26 Javascript
Vue实现剪切板图片压缩功能
Feb 04 Javascript
对vue生命周期的深入理解
Dec 03 Vue.js
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对二维数组进行排序的简单实例
2013/12/19 PHP
PHP数字字符串左侧补0、字符串填充和自动补齐的几种方法
2014/05/10 PHP
模板引擎smarty工作原理以及使用示例
2014/05/25 PHP
php实现html标签闭合检测与修复方法
2015/07/09 PHP
Yii2中如何使用modal弹窗(基本使用)
2016/05/30 PHP
laravel5.4利用163邮箱发送邮件的步骤详解
2017/09/22 PHP
JQuery 小练习(实例代码)
2009/08/07 Javascript
JavaScript对象和字串之间的转换实例探讨
2013/04/21 Javascript
nodejs开发微博实例
2015/03/25 NodeJs
详解vue组件通信的三种方式
2017/06/30 Javascript
vue2手机APP项目添加开屏广告或者闪屏广告
2017/11/28 Javascript
vue单页面打包文件大?首次加载慢?nginx带你飞,从7.5M到1.3M蜕变过程(推荐)
2018/01/16 Javascript
使用vue官方提供的模板vue-cli搭建一个helloWorld案例分析
2018/01/16 Javascript
mpvue实现左侧导航与右侧内容的联动
2019/10/21 Javascript
JS实现炫酷轮播图
2020/11/15 Javascript
elementUI同一页面展示多个Dialog的实现
2020/11/19 Javascript
[08:07]DOTA2每周TOP10 精彩击杀集锦vol.8
2014/06/25 DOTA
[40:05]DOTA2上海特级锦标赛A组小组赛#1 EHOME VS MVP.Phx第一局
2016/02/25 DOTA
Python 网络编程起步(Socket发送消息)
2008/09/06 Python
Python实现读取文件最后n行的方法
2017/02/23 Python
Numpy array数据的增、删、改、查实例
2018/06/04 Python
python生成1行四列全2矩阵的方法
2018/08/04 Python
python实现归并排序算法
2018/11/22 Python
Python实现获取当前目录下文件名代码详解
2020/03/10 Python
使用python将微信image下.dat文件解密为.png的方法
2020/11/30 Python
详解Html5 Canvas画线有毛边解决方法
2018/03/01 HTML / CSS
HTML5 video进入全屏和退出全屏的实现方法
2020/07/28 HTML / CSS
波兰电子产品购物网站:Vobis
2019/05/26 全球购物
大学毕业生自我鉴定
2013/11/05 职场文书
恐龙的灭绝教学反思
2014/02/12 职场文书
《争吵》教学反思
2014/02/15 职场文书
小学生常见病防治方案
2014/06/06 职场文书
党的群众路线教育实践活动个人对照检查材料(乡镇)
2014/11/05 职场文书
委托证明范本
2014/11/25 职场文书
赡养老人协议书范本
2015/08/06 职场文书
高二英语教学反思
2016/03/03 职场文书