Javascript mousedown和mouseup在不同的元素上

Question

I am trying to develop a word search game in JS which looks like this : https://jquery-wordsearch-game.googlecode.com/svn/trunk/demo.html

BTW I am not using that guy's plugin and instead, trying to develop on my own.

I am using the following code to fire a handler to highlight the cells when a user clicks and moves over them.

$('#puzzlecontainer').on('mousedown','.block',myHandler);

The problem is that the mousedown event is fired on the first cell only. I want handlers to fire on all cells in the path of the mouse.

Also how can I make this compatible with touch events ? I tried touchmove and touchdown.

Please help

UPDATE

With Shusl's help I added the following code : var ismosedown = false;

        $('#puzzlecontainer').on('vmousedown','.block', function(){
            globalvars.ismousedown =true;
            $(this).addClass("active");
        });

        $('#puzzlecontainer').on('vmouseover','.block', function(){ 
            if(globalvars.ismousedown){
                $(this).addClass("active");
            }
        });

        $('#puzzlecontainer').on('vmouseup','.block', function(){ 
            globalvars.ismousedown = false;
        });

vmouseover works as desired on a desktop browser. But it is not working on my Android phone and tablet. Please help.

Answer 1

Fire a function to add and remove an event to be fired on mouseenter. Add this event when the mouse is down and remove it when mouse is up to stop highlighting...

$('#puzzlecontainer').on('mousedown','.block',startSelect);// Run when down
$('#puzzlecontainer').on('mouseup','.block',stopSelect);// Run when up

function startSelect(){
    $('#puzzlecontainer').on('mouseenter','.block',myHandler);//Add Handler on enter.
    // Fire the mouseenter event for the current element or it will not highlight.
    $(this).trigger('mouseenter');
}
function stopSelect(){
    $('#puzzlecontainer').off('mouseenter','.block',myHandler);//Remove Handler because mouseup.
}

Answer 2

You can use mouseover event on each cells and set a flag true in myHandler . check if it is true and then treat it as mousedown event

var ismosedown = false;

    $('#puzzlecontainer').on('mousedown','.block', function(){ ismosedown =true; } );
   $('allcells').mouseover(function(){
          if(ismosedown ){ // do works
           }
    }).mouseup(function(){
           ismosedown = false;
     });