mouseup無法在img上運行mousemove

Question

我試圖做一個簡單的拖拽腳本。 這個想法是在鼠標停止時保存位置，在鼠標移動時更新視圖，鼠標移動時停止。問題是，mouseup事件無法正常工作。

看到代碼：

var target = $('a') 
var pos = 0; 
var dragging = false; 

$(document).mousedown(function(e) { pos=e.pageX; dragging = true }) 
$(document).mouseup(function() { dragging = false }) 
$(document).mousemove(function(e) { 
    if(dragging){ 
     target.css('left', e.pageX-pos); 
    } 
}) ​ 

爲什麼鼠標鬆開帶有 「」 標籤的工作原理： http://jsfiddle.net/leyou/eNwzv/

： http://jsfiddle.net/leyou/c3TrG/1/

爲什麼鼠標鬆開不以 「IMG」 標籤工作

試着將它們水平拖動。

在ie9，ff和chrome上存在同樣的問題。 Windows7的

Answer 1

只需添加e.preventDefault()到您的mousedown處理程序，如：

var target = $('img') 
var pos = 0; 
var dragging = false; 

$(document).mousedown(function(e) { e.preventDefault(); pos=e.pageX; dragging = true }) 
$(document).mouseup(function() { dragging = false }) 
$(document).mousemove(function(e) { 
    if(dragging){ 
     target.css('left', e.pageX-pos); 
    } 
}) 

見工作demo。

基本原理是瀏覽器也在做他自己的本地圖像拖放（如拖動圖像並將其放到瀏覽器外的應用程序中），因此您需要取消該默認拖拽並使用.preventDefault()。