IE9和10不反映JavaScript光标更改

Question

IE9和10不反映JavaScript光标更改

javascriptinternet-explorerbindingkeyboardcursor

3

以下代码示例在单击按钮时添加了一个半透明的100％覆盖层。覆盖层会一直保持到释放鼠标按钮为止。以下是预期发生的情况：

单击按钮并按住鼠标。
当鼠标按下并释放Shift键时，按住鼠标。
按下Shift键时，div区域将显示文本“horizontal”，光标将更改为e-resize。释放Shift键后，div将显示“vertical”，光标将更改为n-resize。

在IE9/10中，文本会更改，但光标仍然相同。我尝试将键绑定更改为body级别和overlay级别，但均无效。

以下是代码：（我尝试将其放入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>

- Jules

2个回答

1

添加以下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");
       } 
  });

- Cody Bonney

太疯狂了。我尝试使用.css方法仅设置样式，但那没用。就像你所说的，我必须同时设置类和样式！ - Jules

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Sampson · Accepted Answer

这是一个比较奇怪的问题，但我找到了主要原因。不要复制你的逻辑，在已经设置合适样式后再次添加游标。你可以用自己的克隆替换按钮。让我来解释一下。

当你按下按钮时，它会控制鼠标指针，防止您在IE中修改它。尝试了许多方法后，我终于意识到，如果你在按钮事件上调用$(this).remove()，UI就不再被阻塞，您可以自由地更新游标。但这样做会使我们没有按钮。

最终，我改变了按钮逻辑，使其用自己的克隆替换。这有效地消除了阻止游标更改的按钮，尽管最终用户并不知道发生了这种切换。

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

以下内容需要进行精简:

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

Fiddle: http://jsfiddle.net/jonathansampson/p6eZw/

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