原生态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 ...
随机推荐
- 《JavaScript权威指南》学习笔记 第二天 下好一盘大棋
前段学习js的时候总是零零散散的,以至于很多东西都模棱两可.时间稍微一久,就容易忘记.最主要的原因是这些东西,原来学的时候就不是太懂,以至于和其他知识无法形成记忆链,所以孤零零的知识特别容易忘记.重温 ...
- elk系列1之入门安装与基本操作
preface 我们每天都要查看服务器的日志,一方面是为了开发的同事翻找日志,另一方面是巡检服务器查看日志,而随着服务器数量以及越来越多的业务上线,日志越来越多,人肉运维相当痛苦了,此时,参考现在非常 ...
- Apache Tomcat目录下各个文件夹的作用
1.bin:存放各种不同平台开启与关闭Tomcat的脚本文件. 2.lib:存tomcat与web应用的Jar包. 3.conf:存放tomcat的配置文件. 4.webapps:web应用的发布目录 ...
- 使用Navicat导入导出表的数据做测试(转载)
当我们对MySQL数据库进行了误操作,造成某个数据表中的部分数据丢失时,肯定就要利用备份的数据库,对丢失部分的数据进行导出.导入操作了.Navicat工具正好给我们提供了一个数据表的导入导出功能. 1 ...
- SQL查询效率:100w数据查询只需要1秒钟
G os: windows 数据库: ms sql server 目的: 查询性能测试,比较两种查询的性能 SQL查询效率 step by step -- setp . -- 建表 create ta ...
- easyUI数据表格datagrid之笔记
1.用ajax获取数据库数据 /**========================================= * 读取数据库信息,使用ajax的load方法 */function getMe ...
- Python学习笔记——文件写入和读取
1.文件写入 #coding:utf-8 #!/usr/bin/env python 'makeTextPyhton.py -- create text file' import os ls = os ...
- 使用ASP.NET Web Api构建基于REST风格的服务实战系列教程【八】——Web Api的安全性
系列导航地址http://www.cnblogs.com/fzrain/p/3490137.html 前言 这一篇文章我们主要来探讨一下Web Api的安全性,到目前为止所有的请求都是走的Http协议 ...
- python中的not具体使用及意思
python中的not具体使用及意思 name='' while not name: name=raw_input(u'请输入姓名:') print name python中的not具体表示是什么: ...
- SVN合并操作实践
大家都知道,SVN是很多公司管理代码的版本控制工具,当分支越来越多,版本迭代越来越频繁的时候,经常会出现代码冲突的头疼事儿,这里讲一下鲨鱼遇到过关于代码版本控制的一些事,最后做个小例子,看图描述. 为 ...