原生态js,鼠标按下后,经过了那些单元格

时间:2025-03-12 08:36:19

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

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

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>