Question

以下代码示例在单击按钮时添加半透明的100％叠加。叠加层保持不变，直到释放鼠标按钮。这是应该发生的事情：

单击按钮并按住鼠标。
鼠标按下并按下Shift键。
按下时，div区域表示文本为“水平”，光标变为 E-调整大小。当移位被释放时，div表示“垂直”和光标变为n-resize。

在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>

Answer 1

这是一个相当奇怪的问题，但我已经针对主要问题。在设置了适当的样式之后，不必复制逻辑，而是再次添加游标，而是将该按钮替换为自身的克隆。让我解释一下。

当您在按钮上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");
        }
    }
});

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

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

Answer 2

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

IE9和10并不反映javascript游标的变化

2 个答案: