原生态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自带函数备忘 数组
Dec 29 Javascript
jQuery 判断页面元素是否存在的代码
Aug 14 Javascript
js将json格式内容转换成对象的方法
Nov 01 Javascript
javascript实现下班倒计时效果的方法(可桌面通知)
Jul 10 Javascript
JavaScript中三种异步上传文件方式
Mar 06 Javascript
详解照片瀑布流效果(js,jquery分别实现与知识点总结)
Jan 01 Javascript
jQuery响应滚动条事件功能示例
Oct 14 jQuery
利用Javascript获取选择文本所在的句子详解
Dec 03 Javascript
vue cli使用融云实现聊天功能的实例代码
Apr 19 Javascript
详解nvm管理多版本node踩坑
Jul 26 Javascript
微信小程序实现上传图片裁剪图片过程解析
Aug 22 Javascript
如何在JavaScript中使用localStorage详情
Feb 04 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上传文件的增强函数
2010/07/21 PHP
mysql alter table命令修改表结构实例详解
2016/09/24 PHP
JQuery each()函数如何优化循环DOM结构的性能
2012/12/10 Javascript
javascript面向对象包装类Class封装类库剖析
2013/01/24 Javascript
JavaScript数值转换的三种方式总结
2014/07/31 Javascript
Javascript学习指南
2014/12/01 Javascript
Jquery判断radio、selelct、checkbox是否选中及获取选中值方法总结
2015/04/15 Javascript
jscript读写二进制文件的方法
2015/04/22 Javascript
Jquery插件之Fancybox丰富的弹出层效果附源码下载
2015/12/02 Javascript
AngularJS实现全选反选功能
2015/12/08 Javascript
JS实现点击登录弹出窗口同时背景色渐变动画效果
2016/03/25 Javascript
利用AJAX实现WordPress中的文章列表及评论的分页功能
2016/05/17 Javascript
jQuery对table表格进行增删改查
2020/12/22 Javascript
解决Webpack 热部署检测不到文件变化的问题
2018/02/22 Javascript
详解小程序输入框闪烁及重影BUG解决方案
2018/08/31 Javascript
详解vue-router导航守卫
2019/01/19 Javascript
JavaScript&quot;模拟事件&quot;的注意要点详解
2019/02/13 Javascript
JS实现电商商品展示放大镜特效
2020/01/07 Javascript
Vue+Element-U实现分页显示效果
2020/11/15 Javascript
简介Django中内置的一些中间件
2015/07/24 Python
python使用电子邮件模块smtplib的方法
2016/08/28 Python
python嵌套字典比较值与取值的实现示例
2017/11/03 Python
python实现把两个二维array叠加成三维array示例
2019/11/29 Python
python获取网络图片方法及整理过程详解
2019/12/20 Python
python 消费 kafka 数据教程
2019/12/21 Python
将时尚融入珠宝:Adornmonde
2019/10/17 全球购物
夏季奶茶店创业计划书
2014/01/16 职场文书
《和田的维吾尔》教学反思
2014/04/14 职场文书
生物科学专业毕业生求职信
2014/06/02 职场文书
2015年党员自评材料
2014/12/17 职场文书
英语邀请函范文
2015/02/02 职场文书
装修公司工程部经理岗位职责
2015/04/09 职场文书
大国崛起观后感
2015/06/02 职场文书
秋收起义观后感
2015/06/11 职场文书
导游词之天下银坑景区
2019/11/21 职场文书
深入浅出讲解Java8函数式编程
2022/01/18 Java/Android