當鼠標關閉按鈕時，自定義HTML按鈕不起作用

我有一個HTML按鈕，它包裝了一個圖片標記並定義了一個onmouseup和onmousedown處理函數。當按鈕被按下時，圖像變成被按下的圖像，當按下圖像時，圖像變爲向上圖像。問題在於，如果用戶在按下鼠標時將鼠標從按鈕上拖出，則不會調用onmouseup事件，因此圖像保持按下狀態。這是一個發生了什麼的例子。嘗試單擊按鈕並將其拖出：http://jsfiddle.net/gsingh93/ubyV8/5/當鼠標關閉按鈕時，自定義HTML按鈕不起作用

我該如何解決這個問題？

來源

2012-06-10 gsingh2011

呼叫mouseUp事件（）當鼠標離開按鈕：

onmouseout="mouseUp();"

來源

2012-06-10 22:00:43 Ray

這工作。爲什麼它低調？ – gsingh2011

如果mouseup發生在按鈕外面，您正在問如何將圖像轉回。這不符合你的要求。 –

這甚至不能解決您的問題。當你將光標移出按鈕時，它會回頭。（不是當mouseup） –

你必須使用window作爲目標：

document.getElementsByTagName("button")[0].addEventListener("mousedown", function(){ 
    document.getElementById("image").src = "http://www.clogsmusic.com/padma/redCircle50x50.gif"; 
    window.onmouseup = function(){ 
     document.getElementById("image").src = "http://creativeenergyblog.files.wordpress.com/2008/05/blue-circle.jpg?w=50&h=50"; 
    } 
});

工作演示：http://jsfiddle.net/DerekL/XTLJ6/

來源

2012-06-10 22:00:05

好吧，我得到它了！我擺脫了圖像，並將圖像作爲按鈕的背景。此外，我還實施了一項onmouseout（）調用來解決您的問題。看一看。如果你喜歡就投票！

http://jsfiddle.net/ubyV8/19/

來源

2012-06-10 22:08:06 dziczkzw