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

单元格拖动是元素级别鼠标按下的默认操作。您需要确保页面不会以“应该”的方式做出反应，而是通过向事件侦听器添加两行来反应您想要的方式。

 $(pixelCanvas).on('mousedown', 'td', function(evt) {
    mousedown = true;
    evt.preventDefault(); // prevents any unwanted behavior in the page
    evt.stopImmediatePropagation(); // makes sure that no other event listeners fire from this one event.
  });

Answer 2

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

我简化了下面的代码，以展示其工作原理。如果您在下面的代码中注释掉mousedown，那么在表格外拖动将选择周围的文字。

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();，因为这只会阻止其他事件处理程序

防止细胞拖曳

2 个答案: