學習筆記:滑鼠拖拽優化
前言
之前在給一個元素新增拖拽的時候碰到如下問題: 在快速移動的時候,移動的元素沒有跟隨滑鼠快速移動
原因
出現這個問題的原因是 mousemove 事件觸發是有一個時間間隔的,比如每隔50ms(不一定是,只是假如)瀏覽器才會去獲取一次滑鼠當前的位置,觸發mousemove事件並把當前滑鼠資訊傳入回撥函式中,所以當我們快速移動的時候在下一次檢測之前, 我們的滑鼠有可能已經移動出元素,這樣就導致元素上繫結的滑鼠事件不能正確執行.
解決辦法
那怎麼解決這個辦法呢? 我們只需要把滑鼠事件的mousedown事件繫結在元素上,然後把mousemove和mouseup事件繫結在document就可以了, 因為不管你如何快速移動,滑鼠一直是在document上的
示例程式碼
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無標題文件</title> <style> .block{ position: absolute; width: 100px; height: 100px; background-color: red; cursor: move; } </style> </head> <body> <div class="block"></div> </body> <script type="text/javascript"> var block = document.querySelector('.block'); block.addEventListener('mousedown', moveStart); document.addEventListener('mousemove', moving); document.addEventListener('mouseup', moveEnd); var isDrap = false; var position = { x: 0, y: 0 }; var start = { x: 0, y: 0 }; function moveStart(e) { isDrap = true; start.x = e.pageX; start.y = e.pageY; } function moving(e) { if (!isDrap) return; let move = { x: e.pageX - start.x, y: e.pageY - start.y, } block.style.left = (position.x + move.x) + 'px'; block.style.top = (position.y + move.y) + 'px'; } function moveEnd(e) { isDrap = false; position = { x: block.offsetLeft, y: block.offsetTop } } </script> </body> </html>