8

私のウェブサイトには、自由にサイズ変更できる要素があります。これは、エッジの 4 つのハンドルによって行われます。これらのハンドルをホバリングし、要素のサイズを変更しているときに、それぞれのサイズ変更矢印を表示したいと思います。

現在、本文/ルートの css カーソル スタイルをこれらの矢印に設定することで、この動作を実装しています。それに関する問題は、ブラウザ ウィンドウのクライアント領域への制限です。マウスが押されている間、矢印カーソルがどこでも見えるようになれば、視覚的により一貫性があり、混乱が少なくなります。

Google マップは、地図を移動しながらハンド カーソルで同じことを行っています。したがって、私の質問は、この効果を自分で達成する方法です。

私の現在の（関連する）ソース：

function startObjectScaling(e){
    e.stopPropagation();
    e.preventDefault();
    document.documentElement.style.cursor = this.style.cursor;
    window.addEventListener("mouseup", stopObjectScaling, false);
}

function stopObjectScaling(e){
    e.stopPropagation();
    document.documentElement.style.cursor = '';
    window.removeEventListener("mouseup", stopObjectScaling);
}

[...]

var tg = document.getElementById("transformGadget");
var handle = tg.firstChild.nextSibling;
for(var i=0;i<4;i++){
    handle.addEventListener("mousedown", startObjectScaling, false);
    handle = handle.nextSibling;
}
4

2 に答える 2

4

この目的のために、より最近のブラウザに実装された特別な機能があります。名前はsetCapture（）です。すべてのマウス入力を、メソッドが呼び出されたオブジェクトにリダイレクトします。これで、その要素の単純なcssカーソル定義で、目的の効果をアーカイブするのに十分です。マウスを離すと、この効果は停止します（セキュリティのため）。releaseCaptureを呼び出して手動で停止することもできます

例：

<style type="text/css">
#testObj {
    /* this cursor will also stay outside the window.
       could be set by the script at the mousedown event as well */
    cursor: hand;
}
</style>

[...]

document.getElementById('testObj').onmousedown = function(e){

    // these 2 might be useful in this context as well
    //e.stopPropagation();
    //e.preventDefault();

    // here is the magic
    e.target.setCapture();
}
于 2011-01-04T22:42:07.937 に答える
-1

マウスが押されている間、矢印カーソルがどこでも見える場合。

動作を作成するために、潜在的な OS の癖に依存しています。これは、常に当てはまると仮定できるものではありません。ただし、マウスダウンを開始すると、その時点のカーソルは通常、マウスをどこに移動しても、他の何か (マウスオーバーする可能性のある別のウィンドウ? デスクトップ? システム割り込み?) が変更されるまで同じままです。カーソル。

つまり、この動作に依存しないでください。あなたのために働く何か他のものを見つけてください。これを行う必要がある場合は、ビジネス要件を再検討してください。

于 2010-11-03T16:30:55.220 に答える