[英]Why is my mousedown event triggered on a mouseup event?
我一直在研究Odin 項目的 etch-a-sketch 項目，在實現mousedown和mouseup事件偵聽器時遇到了一些奇怪的行為。
我在容器 div 中創建了一個 50x50 的 div 網格。 容器 div 監聽mousedown事件，在此事件上它調用startDrawing function，填充用戶懸停的框。 它還監聽mousedown事件，因此當釋放鼠標時，將stopDrawing function 並停止填充框。
所有這些都工作得很好，但有時當我按住鼠標左鍵開始畫一條線時，盒子 div 變成了“抓取”。 此后，在按住左鍵的情況下拖動鼠標時，將鼠標懸停在框上時不會填充框。 然后當我釋放鼠標時，它開始繪圖。 就好像在意外“抓取”后切換了行為，但在下一次鼠標按下時，它又開始正常運行。
這可能比自己看更難解釋，所以下面是我的代碼以及相應代碼筆的鏈接。
我試過用谷歌搜索找出如何消除這種“抓取”行為，但我還沒有真正找到任何東西，可能是因為我什至不知道要搜索什么關鍵字。
有人可以解釋發生了什么並提供一些有關如何解決此問題的信息嗎？
const GRID_SIZE = 50; for(let i = 0; i < GRID_SIZE * GRID_SIZE; i++){ const container = document.getElementById('container'); let div = document.createElement('div'); div.classList.add('box'); container.appendChild(div); } function fillBox(e){ this.classList.add('filled'); } function clearGrid(){ const boxes = document.querySelectorAll('.box'); boxes.forEach(box => box.classList.remove('filled')); } function startDrawing(){ // console.log("start drawing"); const boxes = document.querySelectorAll('.box'); boxes.forEach(box => box.addEventListener('mouseover', fillBox)); } function stopDrawing(){ // console.log("stop drawing"); const boxes = document.querySelectorAll('.box'); boxes.forEach(box => box.removeEventListener('mouseover', fillBox)); } const container = document.querySelector('#container'); container.addEventListener('mousedown', startDrawing); container.addEventListener('mouseup', stopDrawing); const button = document.querySelector('#clear-grid-btn'); button.onclick = clearGrid;
#container{ width: 500px; display: grid; grid-template-columns: repeat(50, 10px); grid-template-rows: repeat(50, 10px); border: solid; border-color: black; margin:auto; }.box{ width: 10px; height: 10px; }.box:hover{ background-color: blue; }.filled{ background-color: blue; } #clear-grid-btn{ display:block; margin:auto; margin-top: 10px; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="etch-a-sketch.css"> </head> <body> <div id="container"></div> <button id="clear-grid-btn">Clear grid</button> </body> <script src="etch-a-sketch.js"></script> </html>
這里發生的是 mousedown + mousemove 的默認行為是啟動抓取。
當然，在某些時候，瀏覽器會 select 頁面中的一些內容並開始抓取它。
避免這種情況的解決方案是告訴瀏覽器您的代碼確實處理了該事件，因此不應執行其通常的行為。 您可以通過調用Event::preventDefault()方法來做到這一點：
const GRID_SIZE = 50; for(let i = 0; i < GRID_SIZE * GRID_SIZE; i++){ const container = document.getElementById('container'); let div = document.createElement('div'); div.classList.add('box'); container.appendChild(div); } function fillBox(evt){ evt.preventDefault(); // tell the browser we handle that event this.classList.add('filled'); } function clearGrid(){ const boxes = document.querySelectorAll('.box'); boxes.forEach(box => box.classList.remove('filled')); } function startDrawing(evt){ evt.preventDefault(); // tell the browser we handle that event // console.log("start drawing"); const boxes = document.querySelectorAll('.box'); boxes.forEach(box => box.addEventListener('mouseover', fillBox)); } function stopDrawing(evt){ evt.preventDefault(); // tell the browser we handle that event // console.log("stop drawing"); const boxes = document.querySelectorAll('.box'); boxes.forEach(box => box.removeEventListener('mouseover', fillBox)); } const container = document.querySelector('#container'); container.addEventListener('mousedown', startDrawing); container.addEventListener('mouseup', stopDrawing); const button = document.querySelector('#clear-grid-btn'); button.onclick = clearGrid;
#container{ width: 500px; display: grid; grid-template-columns: repeat(50, 10px); grid-template-rows: repeat(50, 10px); border: solid; border-color: black; margin:auto; }.box{ width: 10px; height: 10px; }.box:hover{ background-color: blue; }.filled{ background-color: blue; } #clear-grid-btn{ display:block; margin:auto; margin-top: 10px; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="etch-a-sketch.css"> </head> <body> <div id="container"></div> <button id="clear-grid-btn">Clear grid</button> </body> <script src="etch-a-sketch.js"></script> </html>
為什么停止mousedown / mouseup沒有停止點擊事件？
[英]Why is a click event not stopped by stopping mousedown/mouseup?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.