首页 > 编程语言> > IE9和10无法反映javascript光标更改

IE9和10无法反映javascript光标更改

2019-12-01 08:36:40 作者：互联网

下面的代码示例在单击按钮时添加了一个半透明的100％覆盖.覆盖将保留,直到释放鼠标按钮为止.这是应该发生的事情：

>单击按钮并按住鼠标.
>按下鼠标时,按下并释放Shift键.
>按下div区域
用文本“水平”表示这一点,光标变为
电子调整大小.释放移位时,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>

解决方法:

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

标签：keyboard,binding,internet-explorer,cursor,javascript
来源： https://codeday.me/bug/20191201/2079510.html