2014-10-02 123 views
1

記錄onmousedownonmouseuponmousemove使用不工作,因爲只有onmouseup觸發一次當按鈕被釋放窗外:http://jsfiddle.net/f1nqproy/5/在mousemove上無法檢測到按下的鼠標按鈕?

event.button只返回在Internet Explorer中有意義的結果。

event.buttons只存在於Firefox中。

那麼如何處理其他瀏覽器呢?

編輯:
MouseEvent.buttons已經現在標準化的,所以這個問題已經得到解決: https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons

+1

你聽說過的jQuery? – giammin 2014-10-02 14:02:20

+0

使用全局處理程序進行鼠標單擊? – Johan 2014-10-02 14:15:30

+1

關於mouseup不能在窗口之外觸發的問題,還是關於'event.button'中的瀏覽器兼容性問題? – 2014-10-02 14:33:46

回答

0

如果你想做些什麼瀏覽器無關的最簡單的方法是使用jQuery

jQuery是一個快速,小巧,功能豐富的JavaScript庫。它使 像HTML文檔遍歷和操縱,事件處理, 動畫和Ajax等事情變得更簡單,使用易於使用的API,在多種瀏覽器上運行 。通過多功能性和可擴展性的組合,jQuery改變了數百萬人編寫JavaScript的方式。

可以伊斯利結合mouseupmousedown事件而忘記了瀏覽器兼容性

$(window).mouseup(function(e){ 
    console.log("mouseup:", e.button); 
}); 
$(window).mousedown(function(e){  
    console.log("mousedown:", e.button); 
}); 

----- UPDATE ------

IE(像往常一樣)做一套工作,所以如果指針在窗口之外,你將不會得到mouseup事件。

的黑客是使用MouseLeave事件:

//hack for IE 
$(window).mouseleave (function(e){  
    console.log("mouseleave"); 
}); 

JsFiddle

+0

此代碼與我在文章的第一行中描述的問題完全相同,即如果在窗口外部釋放兩個按鈕,這將不起作用。這也在您複製和粘貼的評論中進行了描述。此外'mouseudown'應該是'mousedown',而'mouseup'的'buttonDown'的狀態應該是'false',而不是'true'。 – 2014-10-02 14:35:32

+0

@JohnWayne它不能在IE瀏覽器上工作,因爲IE不支持它。最好的選擇是使用jQuery和我寫的黑客攻擊。 – giammin 2014-10-02 15:16:47

+0

在Internet Explorer中的鼠標移動事件上獲取鼠標按鈕狀態是相當容易的。這些存儲在'window.event.button'中作爲第一位,第二位或第三位。與Firefox和'event.buttons'一樣。另外'mouseleave'與'mouseup'完全不同。想象一下,第一人稱射擊遊戲必須手動重新授予鼠標才能進一步轉換,這是致命的。 – 2014-10-02 15:56:54

0

可能,問題是,事件onmouseup通過瀏覽器同時觸發。每次檢查時,在鼠標光標位於元素上時是否觸發事件,哪個事件被綁定。 因此,在你的情況下,第一個事件觸發器(不知道爲什麼),而第二個不起作用 - 這是正確的行爲 - 而不是mouseleave事件觸發。

試圖抓住鼠標離開:

var buttonDown = [false, false, false]; 

$(window).on('mouseup mouseleave', function(e){ 
    buttonDown[e.button] = true; 
    console.log("Buttons up:", buttonDown); 
    buttonDown = [false, false, false]; 
}); 

$(window).on('mousedown', function(e){ 
    buttonDown[e.button] = true; 
    console.log("Buttons down:", buttonDown); 
    buttonDown = [false, false, false]; 
}); 
+0

不論鼠標按鈕是否被釋放,總是觸發'mouseleave'。例如,您可以按下鼠標按鈕,將鼠標移動到窗外,獲取鼠標離開事件,再次進入窗口,釋放按鈕並獲得其他鼠標事件。此外,mouseleave事件並不能很好地替代mouseup事件,特別是對於必須瞄準目標的遊戲。 – 2014-10-02 16:04:57