本来是要判断那些单元格被选中,结果发现行不通,只能判断鼠标按下后,经过了那些单元格

之所以发出来,是觉得案例还有很多有意思的地方

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,鼠标按下后,经过了那些单元格的更多相关文章

  1. JS实现填报时对修改过的单元格进行标识

    1. 描述 在填报预览时,对单元格编辑后,其左上角有个红色标记,但非常不明显,用户很难注意到.有没有什么好的办法,对单元格操作后,将其做较明显的特殊标记处理,方便用户识别呢? 如图所示:对单元格进行操 ...

  2. 填报表导出excel后不可写的单元格处于锁定状态

     填报表单元格分为可写和不可写两种状态,当填报表在web上展现的时候可写单元格可以进行数据填报和修改,非可写单元格不可操作. 报表导出为excel时,润乾导出excel包默认情况下不对excel单 ...

  3. js动态删除某一行,内容超出单元格后超出的部分用省略号代替

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <s ...

  4. LibreOffice/Calc:单元格设置下拉菜单

     造冰箱的大熊猫,本文适用于LibreOffice Calc 5.1.6.2 + Ubuntu 16.04@cnblogs 2019/1/2 LibreOffice是一个类似Microsoft Off ...

  5. javascript--鼠标拖拽窗口案例(鼠标按下,在鼠标移动过程中,盒子跟着一起移动,鼠标松开,盒子停止移动)

    界面如图所示: 要求:在“信息注册”栏,按下鼠标,然后鼠标在页面移动,在鼠标移动过程中,该窗口跟着鼠标移动,当鼠标松开的时候,窗口停止移动.点击“关闭”,该窗口隐藏. 实现思路: 1.页面结构分析:一 ...

  6. js 鼠标和键盘事件

    js 鼠标和键盘事件 鼠标事件 聚焦事件 离焦事件 鼠标单击和双击 鼠标的其他事件 鼠标事件对象 键盘事件 鼠标事件 聚焦事件 <input type="text" id=& ...

  7. JS鼠标事件大全 推荐收藏

    一般事件 事件 浏览器支持 描述 onClick HTML: 2 | 3 | 3.2 | 4 Browser: IE3 | N2 | O3 鼠标点击事件,多用在某个对象控制的范围内的鼠标点击 onDb ...

  8. js鼠标事件大全

    一般事件 事件 浏览器支持 描述 onClick HTML: 2 | 3 | 3.2 | 4 Browser: IE3 | N2 | O3 鼠标点击事件,多用在某个对象控制的范围内的鼠标点击 onDb ...

  9. JS 鼠标事件大全

    一般事件 事件 浏览器支持 描述 onClick HTML: 2 | 3 | 3.2 | 4 Browser: IE3 | N2 | O3 鼠标点击事件,多用在某个对象控制的范围内的鼠标点击 onDb ...

随机推荐

  1. [POJ2773]:Happy 2006

    传送门 同样是欧拉函数的基本应用. $\phi (N)$表示$[1,N]$中,$gcd(i,N)==1$的数的个数,同理,其也能表示$[K \times N+1,(K+1) \times N]$中$g ...

  2. KEGG and Gene Ontology Mapping in Bioinformatic Method

    使用KOBAS进行KEGG pathway和Gene Ontology分析 Article from Blog of Alfred-Feng http://blog.sina.com.cn/u/170 ...

  3. 深入揭秘HTTPS安全问题&连接建立全过程

    作者:[已重置]链接:https://zhuanlan.zhihu.com/p/22142170来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 作为开发者必备的网络安全 ...

  4. socket传数据并记录到文件中

    最近在新项目中要通过socket传一些数据,下面是程序: 功能: 将客户端发送的json数据写入到日志文件中,如果数据不是json的,丢弃. 程序如下: #!/usr/bin/env python # ...

  5. JavaScript学习笔记——BOM_window对象

    javascript浏览器对象模型-windwo对象 BOM Browser Object Model window对象 是BOM中所有对象的核心. 一.属性 1.(位置类型-获得浏览器的位置) IE ...

  6. MONO加载DLL调试命令

    http://www.mono-project.com/docs/advanced/pinvoke/dllnotfoundexception/ http://www.mono-project.com/ ...

  7. Visual Studio低版本升级到Visual Studio 2012出现Warning LNK4075

    Warning LNK4075: ignoring '/EDITANDCONTINUE' due to '/SAFESEH' specification

  8. webform中使用webapi,并且使用autofac

    private void AutofacIoCRegister() { HttpConfiguration config = GlobalConfiguration.Configuration; if ...

  9. Thread 与 Runnable

    在Java中可有两种方式实现多线程,一种是继承Thread类,一种是实现Runnable接口:Thread类是在java.lang包中定义的.一个类只要继承了Thread类同时覆写了本类中的run() ...

  10. Effective Objective-C 2.0 — 第10条:在既有类中使用关联对象存放自定义数据

    可以通过“关联对象”机制来把两个对象连起来 定义关联对象时可指定内存管理语义,用以模仿定义属性时所采用的“拥有关系”与“非拥有关系” 只有在其他做法不可行时才应选用关联对象,因为这种做法通常会引入难于 ...