原生态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; //当鼠标被按下时,为true,放开是为true var indexs =[]; //用来存放鼠标经过的单元格在整个表格的位置,鼠标按下时被初始化, 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,鼠标按下后,经过了那些单元格的更多相关文章
- JS实现填报时对修改过的单元格进行标识
1. 描述 在填报预览时,对单元格编辑后,其左上角有个红色标记,但非常不明显,用户很难注意到.有没有什么好的办法,对单元格操作后,将其做较明显的特殊标记处理,方便用户识别呢? 如图所示:对单元格进行操 ...
- 填报表导出excel后不可写的单元格处于锁定状态
填报表单元格分为可写和不可写两种状态,当填报表在web上展现的时候可写单元格可以进行数据填报和修改,非可写单元格不可操作. 报表导出为excel时,润乾导出excel包默认情况下不对excel单 ...
- js动态删除某一行,内容超出单元格后超出的部分用省略号代替
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <s ...
- LibreOffice/Calc:单元格设置下拉菜单
造冰箱的大熊猫,本文适用于LibreOffice Calc 5.1.6.2 + Ubuntu 16.04@cnblogs 2019/1/2 LibreOffice是一个类似Microsoft Off ...
- javascript--鼠标拖拽窗口案例(鼠标按下,在鼠标移动过程中,盒子跟着一起移动,鼠标松开,盒子停止移动)
界面如图所示: 要求:在“信息注册”栏,按下鼠标,然后鼠标在页面移动,在鼠标移动过程中,该窗口跟着鼠标移动,当鼠标松开的时候,窗口停止移动.点击“关闭”,该窗口隐藏. 实现思路: 1.页面结构分析:一 ...
- js 鼠标和键盘事件
js 鼠标和键盘事件 鼠标事件 聚焦事件 离焦事件 鼠标单击和双击 鼠标的其他事件 鼠标事件对象 键盘事件 鼠标事件 聚焦事件 <input type="text" id=& ...
- JS鼠标事件大全 推荐收藏
一般事件 事件 浏览器支持 描述 onClick HTML: 2 | 3 | 3.2 | 4 Browser: IE3 | N2 | O3 鼠标点击事件,多用在某个对象控制的范围内的鼠标点击 onDb ...
- js鼠标事件大全
一般事件 事件 浏览器支持 描述 onClick HTML: 2 | 3 | 3.2 | 4 Browser: IE3 | N2 | O3 鼠标点击事件,多用在某个对象控制的范围内的鼠标点击 onDb ...
- JS 鼠标事件大全
一般事件 事件 浏览器支持 描述 onClick HTML: 2 | 3 | 3.2 | 4 Browser: IE3 | N2 | O3 鼠标点击事件,多用在某个对象控制的范围内的鼠标点击 onDb ...
随机推荐
- iOS - 全屏滑动
取经地址 1.使用关联 关联是指把两个对象相互关联起来,使得其中的一个对象作为另一个对象的一部分. 使用关联,是基于关键字的,因此,我们可以为任意对象增加任意多的关联,但是关键字是唯一的.关联可以保证 ...
- Linux 下 Oracle 内核参数优化
数据库的性能优化涉及到整个数据库运行环境的方方面面,诸如操作系统,Oracle自身,存储,网络等等几个大块.而操作系统则是Oracle稳定运行与最大化性能的基石.本文主要描述基于Linux系统下 Or ...
- MySQL学习笔记——安装及配置环境
1.安装的版本为mysql-5.6.24-win32.1432006610压缩版 查看教程http://jingyan.baidu.com/article/f3ad7d0ffc061a09c3345b ...
- Web Api系列教程第2季(OData篇)(一)——OData简介和一个小应用
第一季的链接以及系列导航:http://www.cnblogs.com/fzrain/p/3490137.html 在这里,首先要感谢Taiseer Joudeh不断的为我们带来最新的技术分享,楼主对 ...
- (新手向)基于Bootstrap的简单轮播图的手机实现
个人电脑里存了不少适合手机欣赏的图片,但是放手机里看是件很占据资源的事.鉴于家里有一台电脑经常开着,正好用来做家庭局域网共享,于是笔者就设想通过一种比较简单环保的思路.通过手机访问电脑内的图片. 首先 ...
- perspective属性
1. 目前只有safari和chrome浏览器支持 -webkit-perspective. 2. 单位为像素 { -webkit-perspective:500 } 该属性只影响子元素的的透视效果.
- 一种nodejs的MVC框架
mvc会针对请求进行分发,分发一般有controller(针对模块),action(针对模块中的方法),args(请求的参数). 1.先对http请求的url进行设置,解析url中的各种参数: //c ...
- 开源License
http://www.open-open.com/bbs/view/1319816219625 http://my.oschina.net/yangsheng/blog/190917
- 获取<img src="sdf.jpg" Big="sf.jpg">中的big的值
原代码: <img src="sdf.jpg" Big="sf.jpg" onclick="getsrc($(this).attr(" ...
- Docker 修改默认存储位置
首先使用 docker info 查看 docker 的基本信息 sudo docker info Containers: 0 Images: 5 Storage Driver: devicemapp ...