設置mouseup事件時，IE8按鈕會「卡住」

我有<button>帶有嵌套圖像，我使用jQuery切換mousedown和mouseup上的圖像src屬性。當在IE8中點擊按鈕時，圖像向下移動並向右移動1像素，就像按鈕在IE中執行的那樣，但是它會粘在那裏並且不會返回到原始位置。如果我刪除了mouseup事件，按鈕的功能正常，但我的js按鈕行爲當然會中斷。設置mouseup事件時，IE8按鈕會「卡住」

在谷歌搜索的問題，我發現了另一個錯誤，導致與CSS背景的按鈕向上移動，當active，但然後返回。我的按鈕卡住了，並且只有在註冊了mouseup事件時。

的標記看起來是這樣的：

HTML：

<button type="button" id="sdbSearchButton" title="Zoom to this room"> 
    <img id="sdbSearchButtonImg" src="images/control_play.gif" /> 
</button>

CSS：

label.sdbAttr button { 
    float: left; 
    background-color: white; 
    border: none; 
    outline: none; 
    margin-left: 5px; 
    padding: 0px; 
    height: 16px; 
    width: 16px; 
}

的javascript：

$('#sdbSearchButton').mousedown(function(e) { 
    $(this).children().attr('src', 'images/control_play_blue.gif'); 
    searchForSpace(); 
}).mouseout(function() { 
    $(this).children().attr('src', 'images/control_play.gif'); 
}).mouseup(function() { 
    $(this).children().attr('src', 'images/control_play.gif'); 
});

來源

2010-06-21 jasongetsdown

當您在其他瀏覽器中加載相同的網頁時會發生什麼？ – mcandre 2010-06-21 16:12:51

我在Firefox中檢查過它，但FF並沒有像IE那樣移動按鈕，所以它沒有任何意義。有問題的按鈕或頁面上的其他按鈕都不會在FF中移動。在其他具有相同標記的IE中，當處於活動狀態時沒有'mouseup'事件移位，則移回。無論CSS按鈕的「溢出」值如何移動，圖像都會被剪切。爲了防止這種情況發生，我可能會應用針對我提到的錯誤建議的解決方法，這可以防止它們移動，但我認爲它不會解決我粘滯的圖像問題。我可能會丟棄圖像交換效果。好奇是否有其他人經歷過這樣的生活。 – jasongetsdown 2010-06-21 16:25:00

你爲什麼要使用一個img？

button { 
background-image: url('img1') 
} 
button:active { 
background-image: url('img2') 
}

來源

2011-10-24 13:30:51 bopjesvla

啊，親愛的。雖然這個項目很長。我會記住下次。 – jasongetsdown 2012-01-10 15:40:36

設置mouseup事件時，IE8按鈕會「卡住」

回答

相關問題