jquery鼠標事件衝突？

我試圖做一個拖動和滾動我的一個divs「專輯」，這是一個圖像列表。jquery鼠標事件衝突？

這裏就是我所做的

$(album).on({ 
    mousedown:function(){ 
     console.log('mousedown'); 
     $(album).on('mousemove', function(){ 
      console.log('mousemove') 
     }) 
    } 

    mouseup:function(){ 
     console.log('mouseup'); 
     $(album).off('mousemove'); 
    } 

})

這裏發生的事情是，之後按下鼠標，將描繪出「鼠標移動」約4或則5次，將停止跟蹤，和一點點沒有動作圖標露面與我點擊的圖像的透明版本。然後，如果我在這裏放開鼠標，它不會追蹤'mouseup'。但是，如果我點擊該div並且不移動我的鼠標，那麼放開它，它會追蹤'mouseup'。

爲什麼控制檯不能繼續追蹤鼠標移動，爲什麼不追蹤mouseup？謝謝。

來源

2012-11-10 shibbydoo

我有一個完整的工作例子:) – VIDesignz

你有這個人的運氣？ – VIDesignz

我有一個理論，上面代碼中的錯誤是由於事件點擊事件只會觸發一次，並且您希望mousemove上持續狀態。 VIDesign通過阻止click事件的默認行爲解決了這個問題，並且通過爲mousemove事件創建依賴項來解決此問題。這取決於你喜歡哪個答案。 –

在這裏，你去的人！完善！！

工作Fiddle

HTML

<div class='album'></div>

JQuery的

$('body').on('mousedown', '.album', function(e){ 
    e.preventDefault(); 
    console.log('mousedown'); 

    $(this).on('mousemove', function(){ 
     console.log('mousemove'); 
    }); 

    $(this).on('mouseup', function(){ 
     $(this).off('mousemove'); 
     console.log('mouseup'); 
    }); 

});

來源

2012-11-10 02:45:42 VIDesignz

非常感謝！但爲什麼我必須阻止默認操作才能使其工作？ – shibbydoo

@shibbydoo您的歡迎！我無法肯定地說......當我測試你的原版時，我在其他mousedown上獲得了mousemove日誌，因此我認爲mousedown/mouseup與標準點擊功能之間存在干擾。這只是猜測。我敢肯定，如果我們記錄所有鼠標事件，看看它們是如何真正對彼此做出反應的，我們可以搞清楚。但現在，我會說'拿你能得到'這個！ :) – VIDesignz

如果我們去了解它以不同的方式：

var itIsClicked; 

$(album).on("mousedown", function(){ 
    itIsClicked = true; 
}); 

$(album).on('mousemove', function(){ 
    if(itIsClicked) { 
     console.log('mousemove'); 
    } 
}); 

$(album).on("mouseup", function(){ 
    itIsClicked = false; 
});

嵌套事件雖然看起來有意義，但可能會遇到您所描述的那種麻煩。雖然我很想聽聽有關它爲什麼不適合你的任何理論。

來源

2012-11-10 03:59:45

看來如果我們阻止點擊操作的默認值，它會清理。當我在上面解釋我的答案時，如果沒有預設的默認設置，它會在您第一次點擊，拖動，釋放時起作用，但它會以某種方式翻轉功能。當你點擊時，它不起作用，但是當你沒有按下按鈕時移動鼠標，它將註冊鼠標移動。雖然不能解釋爲什麼。 – VIDesignz

我測試了我們的兩個答案，看起來他們各自都有效。我們將不得不運行測試來查看哪些答案應該被接受。 –

jquery鼠標事件衝突？

回答

相關問題