Question

IE9在我的jQuery中使用mouseup命令表现得很奇怪。 mousedown命令会触发，但mouseup命令不会触发。相反，用户必须双击该按钮才能触发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');




});

注意：mouseup命令的replaceWith只是在取消mouseup的情况下

Answer 1

设置元素的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');
});

显然，这将需要更改您的标记 - 基本上您将使用容器元素并交换内部内容。

Answer 2

Andrew提供的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' />");
    });
});

IE将jQuery mousedown / mouseup视为双击

2 个答案: