Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

mouseover while mousedown

I have a large table with with each cell being 25x25 and a div inside each one. Each div has the class of "node" and a background colour is applied to them all. I'm in the process of writing some jQuery code that will change the colour of each div when the mouse goes over it while the mouse button is down.

I currently have it so it works when I mouse over, but I only want it working when the mouse button is down aswell. I have tried many different ways to get it to work but so far I have had no look, below is my current code.

$(document).ready(function(){
  $(".node").mouseover(function(){
   $(this).css({background:"#333333"});
 });
});
like image 855
Stanni Avatar asked Jun 04 '10 01:06

Stanni


People also ask

What is the difference between Mousedown and click?

Note: This differs from the click event in that click is fired after a full click action occurs; that is, the mouse button is pressed and released while the pointer remains inside the same element. mousedown is fired the moment the button is initially pressed.

What is difference between Mouseenter () and mouseover () event?

The mouseover event triggers when the mouse pointer enters the div element, and its child elements. The mouseenter event is only triggered when the mouse pointer enters the div element.

What is the function of the Mousedown () method?

jQuery mousedown() Method The mousedown event occurs when the left mouse button is pressed down over the selected element. The mousedown() method triggers the mousedown event, or attaches a function to run when a mousedown event occurs. Tip: This method is often used together with the mouseup() method.


1 Answers

Try something like this:

$(document).ready(function(){

  var isDown = false;   // Tracks status of mouse button

  $(document).mousedown(function() {
    isDown = true;      // When mouse goes down, set isDown to true
  })
  .mouseup(function() {
    isDown = false;    // When mouse goes up, set isDown to false
  });

  $(".node").mouseover(function(){
    if(isDown) {        // Only change css if mouse is down
       $(this).css({background:"#333333"});
    }
  });
});

EDIT:

You may want to do a separate mousedown on .node for individual item selections.

  $('.node').mousedown(function() {
    $(this).css({background:"#333333"});
  });

EDIT:

Here's an alternative method using bind and unbind.

  $(document).mousedown(function() {
      $(".node").bind('mouseover',function(){
          $(this).css({background:"#333333"});
      });
  })
  .mouseup(function() {
    $(".node").unbind('mouseover');
  });

  $('.node').mousedown(function() {
    $(this).css({background:"#333333"});
  });
like image 92
user113716 Avatar answered Sep 23 '22 11:09

user113716