原生態(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-07Javascript DOM的簡介,節(jié)點(diǎn)和獲取元素詳解
下面小編就為大家分享一篇詳談DOM的簡介,節(jié)點(diǎn)和獲取元素,具有非常好的參考價(jià)值,一起跟隨小編過來看看吧,希望對大家有所幫助2021-11-11javascript實(shí)現(xiàn)Emrips反質(zhì)數(shù)枚舉的示例代碼
下面小編就為大家分享一篇javascript實(shí)現(xiàn)Emrips反質(zhì)數(shù)枚舉的示例代碼,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2017-12-12