Javascript mousedown和mouseup在不同的元素上

Question

我正在嘗試使用JS開發類似於以下內容的單詞搜索游戲： https : //jquery-wordsearch-game.googlecode.com/svn/trunk/demo.html

順便說一句，我沒有使用那個家伙的插件，而是嘗試自己開發。

我使用以下代碼來觸發處理程序，以在用戶單擊並在其上移動時突出顯示這些單元格。

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

問題在於，僅在第一個單元格上觸發mousedown事件。 我希望處理程序在鼠標路徑中的所有單元格上觸發。

另外，如何使它與觸摸事件兼容？ 我嘗試了touchmove和觸地得分。

請幫忙

更新

在Shusl的幫助下，我添加了以下代碼：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可在桌面瀏覽器上按需工作。 但這在我的Android手機和平板電腦上不起作用。 請幫忙。

Answer 1

觸發函數以添加和刪除要在mouseenter上觸發的事件。 在鼠標按下時添加此事件，在鼠標按下時將其刪除以停止突出顯示...

$('#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

您可以在每個單元格上使用mouseover事件，並在myHandler標志設置為true。 檢查是否為真，然后將其視為mousedown事件

var ismosedown = false;

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