原生態(tài)js,鼠標(biāo)按下后,經(jīng)過了那些單元格的簡單實(shí)例
本來是要判斷那些單元格被選中,結(jié)果發(fā)現(xiàn)行不通,只能判斷鼠標(biāo)按下后,經(jīng)過了那些單元格
之所以發(fā)出來,是覺得案例還有很多有意思的地方
onmouseover 的持續(xù)觸發(fā),導(dǎo)致了很多重復(fù)元素
由于將事件綁定在整個(gè)table上,還出現(xiàn)了undefined
鼠標(biāo)的反復(fù)進(jìn)入進(jìn)出,會(huì)導(dǎo)致相同元素的斷斷續(xù)續(xù)的重復(fù),
如何解決他們!
<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> //當(dāng)鼠標(biāo)被按下時(shí),為true,放開是為true
var indexs =[];<BR> //用來存放鼠標(biāo)經(jīng)過的單元格在整個(gè)表格的位置,鼠標(biāo)按下時(shí)被初始化,
dnf.onmousedown = function()
{
flag = true;
indexs = [];
}
dnf.onmousemove = function(e)
{
if(flag)//只有鼠標(biāo)被按下時(shí),才會(huì)執(zhí)行復(fù)合代碼
{
indexs.push(search(e.target,dnf.getElementsByTagName("td")))
}
}
dnf.onmouseup = function()
{
flag = false;
deleteUndefined();//由于會(huì)經(jīng)過邊框,所以會(huì)出現(xiàn)null元素
deleteRepaint();//由于onmouseover不會(huì)只觸發(fā)一次,且我們選擇是可能反復(fù)經(jīng)過一個(gè)單元格
alert(indexs);
}
function deleteRepaint()
{
for(var j=0;j<indexs.length;j++)//保證第j個(gè)元素是唯一的
{
var head = indexs[j];
for(var i=j+1;i<indexs.length;i++)//刪除與第j個(gè)重復(fù)的
{
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>
以上這篇原生態(tài)js,鼠標(biāo)按下后,經(jīng)過了那些單元格的簡單實(shí)例就是小編分享給大家的全部內(nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
- JS實(shí)現(xiàn)側(cè)邊欄鼠標(biāo)經(jīng)過彈出框+緩沖效果
- js鼠標(biāo)經(jīng)過tab選項(xiàng)卡時(shí)實(shí)現(xiàn)切換延遲
- JS+CSS實(shí)現(xiàn)鼠標(biāo)經(jīng)過彈出一個(gè)DIV框完整實(shí)例(帶緩沖動(dòng)畫漸變效果)
- js實(shí)現(xiàn)鼠標(biāo)經(jīng)過表格行變色的方法
- js實(shí)現(xiàn)鼠標(biāo)經(jīng)過時(shí)圖片滾動(dòng)停止的方法
- JS實(shí)現(xiàn)鼠標(biāo)經(jīng)過好友列表中的好友頭像時(shí)顯示資料卡的效果
- 鼠標(biāo)經(jīng)過顯示二級菜單js特效
- javascript學(xué)習(xí)筆記(二) 鼠標(biāo)經(jīng)過時(shí),改變div塊的背景色的代碼
- Javascript實(shí)現(xiàn)的鼠標(biāo)經(jīng)過時(shí)播放聲音
- js實(shí)現(xiàn)圖片顯示局部,鼠標(biāo)經(jīng)過顯示全部的效果
- vue實(shí)現(xiàn)鼠標(biāo)經(jīng)過動(dòng)畫
相關(guān)文章
提高團(tuán)隊(duì)代碼質(zhì)量利器ESLint及Prettier詳解
這篇文章主要為大家介紹了提高團(tuán)隊(duì)代碼質(zhì)量利器ESLint及Prettier使用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-11-11
結(jié)合?ES6?類編寫JavaScript?創(chuàng)建型模式
這篇文章主要介紹了結(jié)合ES6類編寫JavaScript創(chuàng)建型模式,本文開始系統(tǒng)性的對20多種JavaScript?設(shè)計(jì)模式進(jìn)行簡單概述,然后結(jié)合ES6類的方式來編寫實(shí)例代碼展示其使用方式,需要的朋友可以參考一下2022-07-07
Javascript DOM的簡介,節(jié)點(diǎn)和獲取元素詳解
下面小編就為大家分享一篇詳談DOM的簡介,節(jié)點(diǎn)和獲取元素,具有非常好的參考價(jià)值,一起跟隨小編過來看看吧,希望對大家有所幫助2021-11-11
javascript實(shí)現(xiàn)Emrips反質(zhì)數(shù)枚舉的示例代碼
下面小編就為大家分享一篇javascript實(shí)現(xiàn)Emrips反質(zhì)數(shù)枚舉的示例代碼,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2017-12-12

