CODEWITHSUNDEEP
javascripteventsevent-handlingraphael
kea
kea

Reputation: 95

Combing "click" and "hover" permanently?

I want to have the click and drag functionality that Raphael.js provides, an example here: https://qiao.github.io/PathFinding.js/visual/.

The way you add and remove obstacles is great, it's essentially combining mousedown event and hover. But how on earth is that done? Any help please?

The closest I have is: https://codepen.io/ProgrammingKea/pen/ZowWJx

The salient bit is

  div.addEventListener("mousedown", function(ev){
     this.classList.add("obstacle");
     });
     div.addEventListener("mousemove", function(ev){
     this.classList.add("obstacle");
     });
     div.addEventListener("mouseup", function(ev){
     this.classList.add("obstacle");
     });

If you press large, then hover over the grid, that's the closest I've got.

But my issue is that its only hover here, I don't have the click functionality the above link does

Please post answers containing only vanilla JS

Upvotes: 3

Views: 275

Answers (2)

Ian
Ian

Reputation: 13852

It maybe feels a bit clunky putting a handler on every element. I'd be tempted to put a handler on the main container and then check from there...

Maybe first add a bit of code to check if mouse is down.

var main = document.getElementById('main')

var mouseDown = 0;
main.onmousedown = function() { 
  mouseDown=1;
}
main.onmouseup = function() {
  mouseDown=0;
}

Then we can check if a mouse is down or over event...

main.addEventListener('mouseover', mousecheck)
main.addEventListener('mousedown', mousecheck)

Then we preventDefault (stop a drag).

If the mouse is down, and the element being acted on is a box, then we'll change it's colour.

function mousecheck( ev ) {
  ev.preventDefault();
  if( mouseDown && ev.target.className.startsWith( 'box') ) {    
    ev.target.style.backgroundColor = ev.target.style.backgroundColor == "red" ? 'white' : 'red';
  }
}

Codepen

Upvotes: 1

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167250

You can use something like:

["mousedown", "mousemove", "mouseup"]
  .forEach(function (eve) {
    div.addEventListener(eve, function(ev){
      this.classList.add("obstacle");
    });
  });

Upvotes: 1

Related Questions