3

次のコード サンプルは、ボタンがクリックされたときに半透明の 100% オーバーレイを追加します。オーバーレイは、マウス ボタンを離すまで残ります。これが起こるはずのことです：

  • ボタンをクリックし、マウスを押したままにします。

  • マウスがダウンしている間に、Shift キーを押して放します。

  • 押すと、div 領域に「水平」というテキストが表示され、カーソルが e-resize に変わります。シフトを離すと、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 で変更できなくなります。あれこれと1 時間ほど試した結果、ボタン イベントを呼び出すと、UI がブロックされなくなり、カーソルを自由に更新できることがわかりました。$(this).remove()ただし、これではボタンがなくなります。

最後に、ボタンのロジックを変更して、それ自体をクローンに置き換えます。これにより、カーソルの変更をブロックしているボタンが事実上なくなりますが、エンドユーザーはそのような切り替えが行われていないことを知っています。

さらに、いくつかの非常に深刻な問題 (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 に答える