2012-08-12 56 views
0

IE9在我的jQuery中使mouseup命令行爲異常。 mousedown命令會觸發,但mouseup命令不會。相反,用戶必須雙擊該按鈕才能觸發mouseup命令。我可以點擊一下,但它會刪除我喜歡的按鈕效果,所以寧願保留它。IE將jQuery mousedown/mouseup當作雙擊來對待

jQuery;

$('#voteButton').live('mousedown', function(){ 

    $(this).replaceWith('<img src="files/images/voting_button_active.png" width="100" height="100" alt="Vote Button" id="voteButton">'); 


    }).live('mouseup', function(){ 
    $(this).replaceWith('<img src="files/images/voting_button.png" width="100" height="100" alt="Vote Button" id="voteButton">'); 
    $('#votePanel').load('template/votePanel.php'); 




}); 

注:鼠標鬆開命令replaceWith只是存在的情況下,鼠標鬆開被取消

+0

這是類似的情況嗎? http://jsfiddle.net/MLVvT/ – 2012-08-12 00:32:00

+0

是一樣的東西去一 – 2012-08-12 00:40:57

+0

在jsfiddle重新測試後編輯響應。預防默認方法應該起作用。 – Carth 2012-08-12 16:18:24

回答

0

設置元素的html,而不是替換整個元素似乎工作更好一點:

$('#voteButton').live('mousedown', function(){ 
    $(this).html('<img src="files/images/voting_button_active.png" width="100" height="100" alt="Vote Button" id="voteButton">'); 
}).live('mouseup', function(){ 
    $(this).html('<img src="files/images/voting_button.png" width="100" height="100" alt="Vote Button" id="voteButton">'); 
    $('#votePanel').load('template/votePanel.php'); 
}); 

顯然,這將需要對標記進行更改 - 基本上,您將使用容器元素並交換內部內容。

+0

不理想,但如果必須完成,則必須完成。也許其他人會有更簡單的解決方案。 – 2012-08-12 00:42:01

0

安德魯提供的jsfiddle在IE9中爲我工作。您是否檢查過提供第一張圖片時是否意外地將光標移到重新調整大小的div邊界之外?如果你仍然在div中,鼠標事件只會觸發。您可能想要附加到mouseout事件並在mousedown上設置狀態,以便在mousedown處於活動狀態時將鼠標移出div時,會將mouseout視爲mouseup。

編輯:添加防止默認你的mousedown事件和隨後的鼠標應該在IE9適當觸發。

$(function() { 
    $("#vote").live("mousedown", function() { 
     event.preventDefault(); 
     $(this).replaceWith("<img src='http://www.placekitten.com/100/100' id='vote' />");   
    }).live("mouseup", function() { 
     $(this).replaceWith("<img src='http://www.placekitten.com/200/200' id='vote' />"); 
    }); 
});​ 
+0

是的,我查過了,它不起作用。 – 2012-08-12 12:40:27

+0

防止默認刪除IE中的按鈕效果,但我可以忍受。無論如何,IE 10即將推出,應該修復它。 – 2012-08-13 00:03:45