mouseup在mousedown後未被觸發

Question

mousedown後未啓動mouseup。我不知道爲什麼。但如果我取消註釋行

$(this).replaceWith("<div class=" + "'" + $canvas.replace(".", " ") + "'" + "></div>"); 

然後mouseup正常工作。下面是一段代碼

var onmousemove = function ($canvas) { 
     // Painting the map with canvas 
     $map_canvas.mousedown(function() { 
      var ignoreMouseMove = false; 
      mouseDownFired = true; 



      $(".map .row div").mousemove(function (e) { 

       if (ignoreMouseMove) return; 
       //$(this).replaceWith("<div class=" + "'" + $canvas.replace(".", " ") + "'" + "></div>"); 

       moveCanvas($canvas, e) 
      }).mouseup(function() { 
       ignoreMouseMove = true; 
      }); 


     }); 

     var paletteClone = $(document).clone(true);  // bound handler for .palette div 

}; 



var moveCanvas = function ($canvas, e) { 
    $(".map ul li." + $canvas).offset({ 
     left: e.pageX - 30, 
     top: e.pageY - 30 
    }); 
}; 

Answer 1

您綁定mouseup事件的DOM元素，你再在mousemove事件取代 - 在mouseup事件無法運行，因爲該元素在頁面上不再。

另一種方法是使用使用的.map .row父on功能mouseup事件綁定 - 這種結合事件父代替其中添加還是像您期望獲得的行爲元素。

var onmousemove = function ($canvas) { 
    // Painting the map with canvas 
    $map_canvas.mousedown(function() { 
     var ignoreMouseMove = false; 
     mouseDownFired = true; 

     $(".map .row").on("mousemove", "div", (function (e) { 

      if (ignoreMouseMove) return; 

      // this is now OK - event bound to parent 
      $(this).replaceWith("<div class=" + "'" + $canvas.replace(".", " ") + "'" + "></div>"); 

      moveCanvas($canvas, e) 
     }).on("mouseup", "div", function() { 
      ignoreMouseMove = true; 
     }); 


    }); 

    var paletteClone = $(document).clone(true);  // bound handler for .palette div 

}; 



var moveCanvas = function ($canvas, e) { 
    $(".map ul li." + $canvas).offset({ 
     left: e.pageX - 30, 
     top: e.pageY - 30 
    }); 
};