All geek questions in one place

Prevent dragging cells

I created two versions of the pixel maker, one with vanilla JS and the other with jQuery. When you try to draw a grid, if you move too fast, the cell is dragged, and after you release the mouse pointer, it displays the no symbol (a circle with a line through it) and retains color (which does not happen otherwise). The only way to get him to stop painting at this point is to click on the cell. What code can be added, if any, to prevent this default browser behavior for each version?

I'm not sure if this is what needs to be changed, but here are my functions for dragging and dropping colors:

jQuery (view CodePen for full code):

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;
      }
    }
  });
});
+4
2

, 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"/>
Hide result

mousemove, . evt.stopImmediatePropagation();,

+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.
  });
+1

Source: https://habr.com/ru/post/1695382/

More articles:


All Articles