原生态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 相关文章推荐
CLASS_CONFUSION JS混淆 全源码
Dec 12 Javascript
JS之小练习代码
Oct 12 Javascript
JavaScript 类的定义和引用 JavaScript高级培训 自定义对象
Apr 27 Javascript
用JS控制回车事件的代码
Feb 20 Javascript
JavaScript实现设计模式中的单例模式的一些技巧总结
May 17 Javascript
使用JS正则表达式 替换括号,尖括号等
Nov 29 Javascript
详解vue 中使用 AJAX获取数据的方法
Jan 18 Javascript
使用OPENLAYERS3实现点选的方法
Sep 24 Javascript
vue的安装及element组件的安装方法
Mar 09 Javascript
JavaScript查看代码运行效率console.time()与console.timeEnd()用法
Jan 18 Javascript
微信小程序实现Session功能及无法获取session问题的解决方法
May 07 Javascript
JavaScript React如何修改默认端口号方法详解
Jul 28 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获取数组中重复数据的两种方法
2013/06/28 PHP
codeigniter教程之多文件上传使用示例
2014/02/11 PHP
destoon实现不同会员组公司名称显示不同的颜色的方法
2014/08/22 PHP
php获取根域名方法汇总
2014/10/28 PHP
smarty中post用法实例
2014/11/28 PHP
PHP用正则匹配form表单中所有元素的类型和属性值实例代码
2017/02/28 PHP
浅析php如何实现爬取数据原理
2018/09/27 PHP
精心挑选的15款优秀jQuery 本特效插件和教程
2012/08/06 Javascript
用Javascript来生成ftp脚本的小例子
2013/07/03 Javascript
JavaScript字符串对象fromCharCode方法入门实例(用于把Unicode值转换为字符串)
2014/10/17 Javascript
nodejs批量修改文件编码格式
2015/01/22 NodeJs
原生js封装的一些jquery方法(详解)
2016/09/20 Javascript
浅谈Nodejs中的作用域问题
2016/12/26 NodeJs
为你的微信小程序体积瘦身详解
2017/05/20 Javascript
webstorm添加vue.js支持的方法教程
2017/07/05 Javascript
详解@Vue/Cli 3 Invalid Host header 错误解决办法
2019/01/02 Javascript
纯js+css实现在线时钟
2020/08/18 Javascript
[31:55]完美世界DOTA2联赛循环赛 IO vs GXR BO2第一场 11.04
2020/11/05 DOTA
python uuid模块使用实例
2015/04/08 Python
通过Python使用saltstack生成服务器资产清单
2016/03/01 Python
Python字典简介以及用法详解
2016/11/15 Python
python 第三方库的安装及pip的使用详解
2017/05/11 Python
python3学习之Splash的安装与实例教程
2018/07/09 Python
Python从函数参数类型引出元组实例分析
2019/05/28 Python
pandas 选取行和列数据的方法详解
2019/08/08 Python
常用python爬虫库介绍与简要说明
2020/01/25 Python
简述 Python 的类和对象
2020/08/21 Python
美国迪克体育用品商店:DICK’S Sporting Goods
2018/07/24 全球购物
写一个方法1000的阶乘
2012/11/21 面试题
成功的餐厅经营创业计划书
2014/01/15 职场文书
少先队入队活动方案
2014/02/08 职场文书
广告语设计及教案
2014/03/21 职场文书
领导班子遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
JS异步堆栈追踪之为什么await胜过Promise
2021/04/28 Javascript
Pandas||过滤缺失数据||pd.dropna()函数的用法说明
2021/05/14 Python
Python中Cookies导出某站用户数据的方法
2021/05/17 Python