今天我們來聊一下怎么使用原生javascript編寫一個簡單的框選功能。
需求描述
嗯...上邊的功能描述看著是挺簡單的，但實現起來也還是會有些地方需要斟酌思考的。比如，如果我們的框選范圍不是document.body，而是某一個div里邊進行框選呢？而現實開發過程中，我們會遇上的應該就是第二種情況。
怎么實現
二話不說，咱們動手寫代碼吧！因為更好的兼容性，這里就避免了一些ES6的語法，如果是用的其他框架來寫的話，代碼上相應的也要做一些調整。
<head><style>.fileDiv { display: inline-block; width: 100px; height: 100px; margin: 24px; background-color: blue;}</style></head><body> <div class="fileDiv"></div> <div class="fileDiv"></div> <div class="fileDiv"></div> <div class="fileDiv"></div> <div class="fileDiv"></div> <div class="fileDiv"></div> <div class="fileDiv"></div> <div class="fileDiv"></div></body>添加鼠標事件監聽
由于js自身并沒有帶有鼠標點擊按住不放這樣子的事件，這里我們不僅需要檢測鼠標左鍵點擊按下，還要加一個定時器來檢測鼠標是否按住不放了。
<script> (function () { // 定時器id var mouseStopId; // 是否開啟框選功能 var mouseOn = false; // 用來存放鼠標點擊初始位置 var startX = 0; var startY = 0; // 添加鼠標按下監聽事件 document.body.addEventListener('mousedown', function (e) { // 阻止事件冒泡 clearEventBubble(e); // 判斷是否為鼠標左鍵被按下 if (e.buttons !== 1 || e.which !== 1) return; mouseStopId = setTimeout(function () { mouseOn = true; startX = e.clientX; startY = e.clientY; }, 300); // 間隔300毫秒后執行，判定這時候鼠標左鍵被按住不放 }); // 添加鼠標移動事件監聽 document.body.addEventListener('mousemove', function (e) { // 如果并非框選開啟，退出 if (!mouseOn) return; // 阻止事件冒泡 clearEventBubble(e); // 處理鼠標移動 // codes }); // 添加鼠標點擊松開事件監聽 document.body.addEventListener('mouseup', function (e) { // 阻止事件冒泡 clearEventBubble(e); // 處理鼠標點擊松開 // codes }); function clearEventBubble (e) { if (e.stopPropagation) e.stopPropagation(); else e.cancelBubble = true; if (e.preventDefault) e.preventDefault(); else e.returnValue = false; } })();</script>添加框選可視化元素
框選可視化元素示意圖
我們有了事件監聽還不夠，為了更好的交互效果，我們需要一個隨時跟隨著鼠標移動的框選框元素，用于讓用戶隨時感知框選范圍。
<script> (function () { var mouseStopId; var mouseOn = false; var startX = 0; var startY = 0; document.body.addEventListener('mousedown', function (e) { clearEventBubble(e); if (e.buttons !== 1 || e.which !== 1) return; mouseStopId = setTimeout(function () { mouseOn = true; startX = e.clientX; startY = e.clientY; // 創建一個框選元素 var selDiv = document.createElement('div'); // 給框選元素添加css樣式，這里使用絕對定位 selDiv.style.cssText = 'position:absolute;width:0;height:0;margin:0;padding:0;border:1px dashed #eee;background-color:#aaa;z-index:1000;opacity:0.6;display:none;'; // 添加id selDiv.id = 'selectDiv'; document.body.appendChild(selDiv); // 根據起始位置，添加定位 selDiv.style.left = startX + 'px'; selDiv.style.top = startY + 'px'; }, 300); }); document.body.addEventListener('mousemove', function (e) { if (!mouseOn) return; clearEventBubble(e); // 獲取當前坐標 var _x = e.clientX; var _y = e.clientY; // 根據坐標給選框修改樣式 var selDiv = document.getElementById('selectDiv'); selDiv.style.display = 'block'; selDiv.style.left = Math.min(_x, startX) + 'px'; selDiv.style.top = Math.min(_y, startY) + 'px'; selDiv.style.width = Math.abs(_x - startX) + 'px'; selDiv.style.height = Math.abs(_y - startY) + 'px'; // 如果需要更直觀一點的話，我們還可以在這里進行對框選元素覆蓋到的元素進行修改被框選樣式的修改。 }); document.body.addEventListener('mouseup', function (e) { clearEventBubble(e); }); function clearEventBubble (e) { if (e.stopPropagation) e.stopPropagation(); else e.cancelBubble = true; if (e.preventDefault) e.preventDefault(); else e.returnValue = false; } })();</script>添加鼠標松開事件監聽
元素是否被選中示意圖
我們沒有在鼠標移動的時候去實時統計被框選到的DOM元素，如果需要實時統計或者實時修改被選擇的DOM元素的樣式，以便更準確的讓用戶感知到被框選的內容的話，可以選擇在mousemove事件里邊去實現以下代碼：
<script> (function () { var mouseStopId; var mouseOn = false; var startX = 0; var startY = 0; document.onmousedown = function (e) { clearEventBubble(e); if (e.buttons !== 1 || e.which !== 1) return; mouseStopId = setTimeout(function () { mouseOn = true; startX = e.clientX; startY = e.clientY; var selDiv = document.createElement('div'); selDiv.style.cssText = 'position:absolute;width:0;height:0;margin:0;padding:0;border:1px dashed #eee;background-color:#aaa;z-index:1000;opacity:0.6;display:none;'; selDiv.id = 'selectDiv'; document.body.appendChild(selDiv); selDiv.style.left = startX + 'px'; selDiv.style.top = startY + 'px'; }, 300); } document.onmousemove = function (e) { if (!mouseOn) return; clearEventBubble(e); var _x = e.clientX; var _y = e.clientY; var selDiv = document.getElementById('selectDiv'); selDiv.style.display = 'block'; selDiv.style.left = Math.min(_x, startX) + 'px'; selDiv.style.top = Math.min(_y, startY) + 'px'; selDiv.style.width = Math.abs(_x - startX) + 'px'; selDiv.style.height = Math.abs(_y - startY) + 'px'; }; // 添加鼠標松開事件監聽 document.onmouseup = function (e) { if (!mouseOn) return; clearEventBubble(e); var selDiv = document.getElementById('selectDiv'); var fileDivs = document.getElementsByClassName('fileDiv'); var selectedEls = []; // 獲取參數 var l = selDiv.offsetLeft; var t = selDiv.offsetTop; var w = selDiv.offsetWidth; var h = selDiv.offsetHeight; for (var i = 0; i < fileDivs.length; i++) { var sl = fileDivs[i].offsetWidth + fileDivs[i].offsetLeft; var st = fileDivs[i].offsetHeight + fileDivs[i].offsetTop; if (sl > l && st > t && fileDivs[i].offsetLeft < l + w && fileDivs[i].offsetTop < t + h) { // 該DOM元素被選中，進行處理 selectedEls.push(fileDivs[i]); } } // 打印被選中DOM元素 console.log(selectedEls); // 恢復參數 selDiv.style.display = 'none'; mouseOn = false; }; function clearEventBubble (e) { if (e.stopPropagation) e.stopPropagation(); else e.cancelBubble = true; if (e.preventDefault) e.preventDefault(); else e.returnValue = false; } })();</script>這里判斷一個元素是否被選中采用的判斷條件是：
滿足了以上四個條件，即可判別為該DOM元素被選中了。
實際應用
上邊的例子，舉得有些過于簡單了。實際的開發當中，框選的范圍往往不可能是整個document.body，而是某一個具體的有特定寬度跟高度限制的元素。這個時候，就還需要考慮這個框選容器元素造成的定位偏差，以及容器內元素過多，出現滾動條的情況了。
乍一看，上邊的情況需要考慮的因素多了不少，比較容易亂。我這里采用的方法是修改坐標系的方式來實現上邊描述的功能。上文我們已經實現了在document.body整個頁面左上角頂點作為坐標原點來實現框選功能，這時候我們需要修改坐標原點為框選容器的左上角頂點作為坐標原點即可。
換言之，就是修改mousedown跟mousemove事件時，初始位置由原來的e.clientX跟e.clientY修改為e.clientX - selectContaienr.offsetLeft + selectContainer.scrollLeft跟e.clientY - selectContainer.offsetTop + selectContainer.scrollTop。
坐標更改shi'yi'tu
<html> <head> <title>region</title> <style> body { margin: 0; padding: 0; } #selectContainer { position: relative; width: 400px; /* 演示寬高與位置 */ height: 400px; top: 200px; left: 200px; border: 1px solid #eee; overflow: hidden; overflow-y: auto; } .fileDiv { display: inline-block; width: 100px; height: 100px; margin: 24px; background-color: #0082CC; } </style> </head> <body> <div id="selectContainer"> <div class="fileDiv"></div> <div class="fileDiv"></div> <div class="fileDiv"></div> <div class="fileDiv"></div> <div class="fileDiv"></div> <div class="fileDiv"></div> <div class="fileDiv"></div> <div class="fileDiv"></div> <div class="fileDiv"></div> <div class="fileDiv"></div> <div class="fileDiv"></div> <div class="fileDiv"></div> <div class="fileDiv"></div> <div class="fileDiv"></div> </div> </body></html><script> (function () { var mouseStopId; var mouseOn = false; var startX = 0; var startY = 0; document.onmousedown = function (e) { clearEventBubble(e); if (e.buttons !== 1 || e.which !== 1) return; mouseStopId = setTimeout(function () { mouseOn = true; // 獲取容器元素 var selectContainer = document.getElementById('selectContainer'); // 調整坐標原點為容器左上角 startX = e.clientX - selectContainer.offsetLeft + selectContainer.scrollLeft; startY = e.clientY - selectContainer.offsetTop + selectContainer.scrollTop; var selDiv = document.createElement('div'); selDiv.style.cssText = 'position:absolute;width:0;height:0;margin:0;padding:0;border:1px dashed #eee;background-color:#aaa;z-index:1000;opacity:0.6;display:none;'; selDiv.id = 'selectDiv'; // 添加框選元素到容器內 document.getElementById('selectContainer').appendChild(selDiv); selDiv.style.left = startX + 'px'; selDiv.style.top = startY + 'px'; }, 300); } document.onmousemove = function (e) { if (!mouseOn) return; clearEventBubble(e); var selectContainer = document.getElementById('selectContainer'); var _x = e.clientX - selectContainer.offsetLeft + selectContainer.scrollLeft; var _y = e.clientY - selectContainer.offsetTop + selectContainer.scrollTop; var _H = selectContainer.clientHeight; // 鼠標移動超出容器內部，進行相應的處理 // 向下拖拽 if (_y >= _H && selectContainer.scrollTop <= _H) { selectContainer.scrollTop += _y - _H; } // 向上拖拽 if (e.clientY <= selectContainer.offsetTop && selectContainer.scrollTop > 0) { selectContainer.scrollTop = Math.abs(e.clientY - selectContainer.offsetTop); } var selDiv = document.getElementById('selectDiv'); selDiv.style.display = 'block'; selDiv.style.left = Math.min(_x, startX) + 'px'; selDiv.style.top = Math.min(_y, startY) + 'px'; selDiv.style.width = Math.abs(_x - startX) + 'px'; selDiv.style.height = Math.abs(_y - startY) + 'px'; }; document.onmouseup = function (e) { if (!mouseOn) return; clearEventBubble(e); var selDiv = document.getElementById('selectDiv'); var fileDivs = document.getElementsByClassName('fileDiv'); var selectedEls = []; var l = selDiv.offsetLeft; var t = selDiv.offsetTop; var w = selDiv.offsetWidth; var h = selDiv.offsetHeight; for (var i = 0; i < fileDivs.length; i++) { var sl = fileDivs[i].offsetWidth + fileDivs[i].offsetLeft; var st = fileDivs[i].offsetHeight + fileDivs[i].offsetTop; if (sl > l && st > t && fileDivs[i].offsetLeft < l + w && fileDivs[i].offsetTop < t + h) { selectedEls.push(fileDivs[i]); } } console.log(selectedEls); selDiv.style.display = 'none'; mouseOn = false; }; function clearEventBubble (e) { if (e.stopPropagation) e.stopPropagation(); else e.cancelBubble = true; if (e.preventDefault) e.preventDefault(); else e.returnValue = false; } })();</script>使用前端框架
上邊的代碼，我們只是在一個html文件里邊實現了框選的功能。很多時候，我們會使用一些前端框架來編寫框選的功能（例如vue.js，angular,react,polymer之類的前端框架）。這個時候，我們可以利用框架自身的生命周期的函數，添加對應的監聽事件，然后在mouseup事件里移除掉上邊這些事件監聽，以減少不必要的資源消耗。而且，很多時候，組件化的使用，使得被框選的元素，往往也是一個可重復利用的小組件，也是需要根據相應的框架的對應的途徑獲取到對應的DOM元素來獲取其屬性。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
