IE9和10没有'；不能反映javascript光标的更改

下面的代码示例在单击按钮时添加半透明的100%覆盖。覆盖将一直保留，直到松开鼠标按钮。下面是应该发生的事情：

• 单击按钮并按住鼠标

• 当鼠标按下时，按下并释放shift键

• 按下时，会显示一个div区域 用文本“水平”表示，光标变为 e-resize。释放换档时，div指示“垂直”和 光标将更改为n-调整大小

在IE9/10中，文本更改，但光标保持不变。我尝试过将键绑定更改为躯干级别和覆盖级别，但没有效果

代码如下：（我尝试将其放入JSFIDLE和jsbin中，但由于某些原因，它们完全忽略了按键）

.覆盖{
背景色：rgba（0,0,0,0.3）；
顶部：0；底部：0；左侧：0；右侧：0；位置：固定；
z指数：999；
}
.vertical{cursor:n-resize！重要；}
.horizontal{cursor:e-resize！重要；}
$（函数（）{
$（“#按钮1”）.mousedown（onButtonMouseDown）；
函数onButtonMouseDown（e）{
var叠加；
overlay=$（“body”）。在（“”.next（）之后；
叠加.addClass（（e.shiftKey）-“水平”：“垂直”）；
$（文档）.bind（“keydown.ntextbox”，函数（e）{
如果（e.which==16）{
overlay.removeClass（“垂直”）.addClass（“水平”）；
$（“#div1”）.html（“水平”）；
}
});
$（文档）.bind（“keyup.ntextbox”，函数（e）{
如果（e.which==16）{
overlay.removeClass（“水平”）.addClass（“垂直”）；
$（“#div1”）.html（“垂直”）；
}
});
叠加鼠标（函数（e）{
覆盖。删除（）；
$（文档）。解除绑定（“.ntextbox”）；
返回false；
});
返回false；
}
});
...
点击我

添加以下jQuery语句似乎可以解决这个问题

$(".overlay").css("cursor", "e-resize");
$(".overlay").css("cursor", "n-resize");

那么，也许是这样的

  $(document).bind("keydown.ntextbox", function (e) {
       if (e.which === 16) {
           overlay.removeClass("vertical").addClass("horizontal").css("cursor", "e-resize");
           $("#div1").html("horizontal");
       }
  });

  $(document).bind("keyup.ntextbox", function (e) {
       if (e.which === 16) {
           overlay.removeClass("horizontal").addClass("vertical").css("cursor", "n-resize");
           $("#div1").html("vertical");
       } 
  });

---

这是一个相当奇怪的问题，但我已经锁定了主要问题。与其复制您的逻辑，在已经设置了适当的样式之后再次添加游标，不如用按钮本身的克隆替换按钮。让我解释一下

当您在按钮上单击鼠标向下时，

mousedown

将控制光标，不再允许您在IE中对其进行修改。经过大约一个小时的尝试，我终于意识到，如果您在按钮事件上调用

$（this）.remove（）

，UI将不再被阻止，您可以随意更新光标。然而，这确实让我们没有一个按钮

最后如果修改了按钮逻辑，将其自身替换为克隆。这有效地消除了阻止光标更改的按钮，尽管最终用户知道没有发生这样的切换

此外，我还更新了一些代码，因为它有一些非常严重的问题（例如在body标记之外添加overlay元素等等）

可以稍微清理一下以下内容：

var overlay = $("<div>", {
    'class':'overlay', 
    'mouseup':function(){ $(this).hide() } 
}).hide().appendTo("body");;

$("#button1").on("mousedown", function(){
    overlay.show();
    // Replacing this button permits the cursor
    // to be updated in IE
    $(this).replaceWith( $(this).clone(true) );
});

$(document).on('keydown keyup', function(e){
    if ( e.which === 16 && overlay.is(":visible") ) {
        if ( e.type === "keyup" ) {
            overlay.addClass("vertical").removeClass("horizontal");
        } else {
            overlay.addClass("horizontal").removeClass("vertical");
        }
    }
});​

var overlay=$（“”{
“类”：“覆盖”，
'mouseup'：函数（）{$（this.hide（）}
}).hide（）.appendTo（“body”）；；
$（“#按钮1”）。在（“鼠标向下”，函数（）上{
overlay.show（）；
//替换此按钮允许光标移动
//将在IE中更新
$（this.replaceWith（$（this.clone（true））；
});
$（文档）.on（'keydown-keyup'，函数（e）{
如果（e.which===16&&overlay.is（“：可见”））{
如果（例如类型==“键控”）{
叠加.addClass（“垂直”）.removeClass（“水平”）；
}否则{
叠加.addClass（“水平”）.removeClass（“垂直”）；
}
}
});​

小提琴：

---

值得注意的是，根据我的测试，Chrome仍然阻止用户更改光标的能力。我没有看过Firefox、Safari或Opera。

这太疯狂了。我尝试过用.css方法设置样式，但没有效果。正如你所说，我必须同时设置课程和风格！嗨，谢谢你花时间看这个。我试过你的JSFIDLE，但对我来说，它只在FF中有效；其他测试包括IE9、IE10、Chrome和Opera。另外，你说除了（令人尴尬的）身体问题之外，还有一些严重的问题。你能告诉我是什么吗。干杯。@Jules它在IE10和IE9中也可以使用，但是你必须在按住shift键的同时移动鼠标。光标只会在鼠标移动时更新：不要问我为什么，我一点也不知道：）其他问题是每次按下按钮时重新创建覆盖元素，每次释放鼠标时将其销毁。此外，您还可以在每个按钮按下周期中绑定和解除绑定。所有这些都将不必要的性能成本置于风险之中。

var overlay = $("<div>", {
    'class':'overlay', 
    'mouseup':function(){ $(this).hide() } 
}).hide().appendTo("body");;

$("#button1").on("mousedown", function(){
    overlay.show();
    // Replacing this button permits the cursor
    // to be updated in IE
    $(this).replaceWith( $(this).clone(true) );
});

$(document).on('keydown keyup', function(e){
    if ( e.which === 16 && overlay.is(":visible") ) {
        if ( e.type === "keyup" ) {
            overlay.addClass("vertical").removeClass("horizontal");
        } else {
            overlay.addClass("horizontal").removeClass("vertical");
        }
    }
});​