IE9 和 10 不反映 JavaScript 光标更改

IE9 and 10 doesn't reflect javascript cursor change

本文关键字：JavaScript 光标 IE9      更新时间：2023-09-26

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

  • 单击按钮并按住鼠标。

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

  • 按下时，div 区域用文本"水平"表示这一点，光标更改为电子调整大小。当 shift 被释放时，div 指示"垂直"和光标将更改为 N 调整大小。

在IE9/10中，文本会更改，但光标保持不变。我尝试将密钥绑定更改为正文级别和覆盖级别，但无济于事。

这是代码：（我尝试将其放入jsfiddle和jsbin中，但由于某种原因，它们完全忽略了按键）。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <style type="text/css">
        .overlay {
            background-color: rgba(0, 0, 0, 0.3);
            top: 0; bottom: 0; left: 0; right: 0; position: fixed;
            z-index: 999;
        }
        .vertical { cursor: n-resize !important; }
        .horizontal { cursor: e-resize !important; }
    </style>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#button1").mousedown(onButtonMouseDown);
            function onButtonMouseDown(e) {
                var overlay;
                overlay = $("body").after("<div class='"overlay'"></div>").next();
                overlay.addClass((e.shiftKey) ? "horizontal" : "vertical");
                $(document).bind("keydown.ntextbox", function (e) {
                    if (e.which === 16) {
                        overlay.removeClass("vertical").addClass("horizontal");
                        $("#div1").html("horizontal");
                    }
                });
                $(document).bind("keyup.ntextbox", function (e) {
                    if (e.which === 16) {
                        overlay.removeClass("horizontal").addClass("vertical");
                        $("#div1").html("vertical");
                    }
                });
                overlay.mouseup(function (e) {
                    overlay.remove();
                    $(document).unbind(".ntextbox");
                    return false;
                });
                return false;
            }
        });
    </script>
</head>
<body>
    <div id="div1">...</div>
    <button id="button1">Click me</button>
</body>
</html>
这是一个

相当奇怪的问题，但我瞄准了主要问题。与其复制逻辑，在设置了适当的样式后再次添加光标，不如将按钮替换为其自身的克隆。让我解释一下。

当您mousedown按钮时，这将控制光标，不再允许您在IE中修改它。经过大约一个小时的尝试，我终于意识到，如果你在按钮事件上调用$(this).remove()，UI将不再被阻止，你可以根据需要自由更新光标。然而，这确实让我们没有按钮。

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

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

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

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");
        }
    }
});​

小提琴：http://jsfiddle.net/jonathansampson/p6eZw/

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

添加以下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");
       } 
  });
相关文章：