javascript - 防止单元格拖拽

Question

我创建了两个版本的像素艺术创作者，一个使用 vanilla JS，另一个使用 jQuery。当您尝试在网格上绘图时，如果您移动得太快，则会拖动一个单元格，并且在您释放鼠标指针后，它会显示无符号(带有一条线的圆圈)并保持着色(这不会发生否则)。让它在那一点停止着色的唯一方法是单击一个单元格。如果有的话，我可以添加什么代码来阻止每个版本的这种默认浏览器行为？

我不确定这些是否需要更改，但这是我的颜色拖动功能:

jQuery(查看 CodePen 以获得完整代码):

function dragColor() {
  // Filters clicks by those in cells
  $(pixelCanvas).on('mousedown', 'td', function() {
    mousedown = true;
  });

  // 'mouseup': when pointer is over element and mouse button has been clicked then released (unlike click event, doesn't have to be on same element on which mousedown occurred)
  $(document).mouseup(function() {
    mousedown = false;
  });

  // 'mouseover' triggered when mouse pointer enters an element
  $(pixelCanvas).on('mouseover', 'td', function() {
    if (mousedown) {
      $(this).css('background-color', color);
    }
  });
}

Vanilla JS(查看 CodePen 以获得完整代码):

let down = false; // Tracks whether or not mouse pointer is pressed

// Listens for mouse pointer press and release on grid. Changes value to true when pressed, but sets it back to false as soon as released
pixelCanvas.addEventListener('mousedown', function(e) {
    down = true;
    pixelCanvas.addEventListener('mouseup', function() {
        down = false;
    });
  // Ensures cells won't be colored if grid is left while pointer is held down
  pixelCanvas.addEventListener('mouseleave', function() {
    down = false;
  });

  pixelCanvas.addEventListener('mouseover', function(e) {
    // 'color' defined here rather than globally so JS checks whether user has changed color with each new mouse press on cell
    const color = document.querySelector('.color-picker').value;
    // While mouse pointer is pressed and within grid boundaries, fills cell with selected color. Inner if statement fixes bug that fills in entire grid
    if (down) {
      // 'TD' capitalized because element.tagName returns upper case for DOM trees that represent HTML elements
      if (e.target.tagName === 'TD') {
        e.target.style.backgroundColor = color;
      }
    }
  });
});

Answer 1

要停止默认的拖动操作，您需要在 mousedown 事件上调用 event.preventDefault。

我在下面简化了您的代码以展示其工作原理。如果您在下面的代码中注释掉 e.preventDefault()，然后拖动到表格外将选择周围的文本。

使用 e.preventDefault()，当您在表格中mousedown 时，不会发生选择。

let down = false; // Tracks whether or not mouse pointer is pressed

var pixelCanvas = document.getElementById('pixelCanvas');

// Stop the drag ad remove the event listeners so we don't keep adding new listeners over and over.
function stopDrag() {
  down = false;
  pixelCanvas.removeEventListener('mouseup', stopDrag);
}

function doMouseLeave() {
// Do you really want to turn off drag here?
//  down = false;
  pixelCanvas.removeEventListener('mouseleave', doMouseLeave);
}

function doMouseOver(e) {
    const color = document.querySelector('.color-picker').value;
    if (down && e.target.tagName === 'TD') {
      e.target.style.backgroundColor = color;
    }
  }

// Listens for mouse pointer press and release on grid. Changes value to true when pressed, but sets it back to false as soon as released
pixelCanvas.addEventListener('mousedown', function(e) {
  down = true;
  pixelCanvas.addEventListener('mouseup', stopDrag);
  pixelCanvas.addEventListener('mouseleave', doMouseLeave);
  pixelCanvas.addEventListener('mouseover', doMouseOver);
  e.preventDefault();
});

#pixelCanvas {
  border: 1px solid black;
  border-collapse: collapse;
}

td {
  border: 1px solid black;
  width: 5px;
  height: 5px;
}

<h3>Color Me</h1>
<table id="pixelCanvas" width="300" height="300">
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
</table>
<hr/>
Color: <input class="color-picker" value="#000000"/>

在 mousemove 事件上执行此操作以防止拖动单元格。此外，您不需要 evt.stopImmediatePropagation(); 因为这只会阻止其他事件处理程序