3

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

  • 单击按钮并按住鼠标。

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

  • 当它被按下时，一个 div 区域用文本“horizo​​ntal”指示这一点，并且光标变为 e-resize。释放 shift 时，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>
4

2 回答 2

2

这是一个相当奇怪的问题，但我已经瞄准了主要问题。与其重复你的逻辑，在已经设置了适当的样式后再次添加光标，你可以用它自己的克隆来替换按钮。让我解释。

当您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。

于 2012-06-04T03:45:48.380 回答
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");
       } 
  });
于 2012-05-31T14:29:25.227 回答