6

Javascript で、スクロールバー (ページに表示される任意のスクロールバー) をクリックして画像にカーソルを合わせると、画像が再びドラッグを開始します。

画像は、マウスボタンを押した状態でのみドラッグする必要があります。

そこで、マウスボタンの状態（マウスダウンまたはマウスアップ）を知ることで、この問題に取り組もうとしました

この問題はIEとchromeにのみ存在し、私が試した他のブラウザーには存在しません。

Javascript:

document.onmousemove = mouseMove;
document.onmousedown = mouseDown;
document.onmouseup   = mouseUp;

function mouseMove(ev) {

    var mouseButtonState;
    // put code here to get mouseButtonState variable
    console.log('state of mouse is'+mouseButtonState);
}

マウスを動かすと、プログラムは必要な上下の値を表示するmouseButtonState はずです

マウス ボタンの現在の状態を知るにはどうすればよいですか?

4

3 に答える 3

4

質問への答えとして

クリックがブラウザの外側（または画像の外側）で発生したときに、システムが画像をドラッグすることを決定した理由はよくわかりません..適切に答えるためには、実際のコードを表示する必要があります（マウスイベントだけで十分です)。ただし、以下で説明するようにシステムを実装すると、質問している問題が発生することはありません。

さらに詳しい情報

古き良きQuirksmodeにはこれについて何か言いたいことがあります...それは基本的に、W3Cのおかげで、マウスムーブハンドラーで左ボタンが押されたかどうかを検出できないという事実に相当しe.buttonます。押されています - 何だと思いますか？-e.buttonレポート 0! (つまり、W3C 準拠のブラウザーの場合) . これは、Internet Explorer の「バイナリ フラグ」の実装に完全に同意したときの 1 つでした。

http://www.quirksmode.org/js/events_properties.html#button

mousedown私が知っているマウスの状態を取得する唯一の方法は、 and を使用して検出および記録するmouseupことです。これは、既に行っているように聞こえます。現在、私は新しい「タッチ」ベースのイベントをいじる機会がありませんでした.それらはあなたを助けることができるかもしれません.しかし、それをクロスブラウザで動作させるのは難しいでしょう. 結局のところ、ブラウザー環境で作業していることを受け入れなければならない場合があり、それは特別に設計されたアプリほどスムーズではありません。

Internet Explorer で動作する簡単なコード:

document.body.onmousemove = function(e){
  e = e ? e : Event;
  if ( e.button == 1 ) {
    /// mouse button is pressed
  }
}

IE およびその他のほとんどすべてで機能する簡単なコード:

var delm = document.documentElement ? document.documentElement : document.body;
var buttonPressed = false;

delm.onmousdown = function(e){
  buttonPressed = true;
}

delm.onmousup = function(e){
  buttonPressed = false;
}

delm.onmousmove = function(e){
  if ( buttonPressed ) {
    /// the button is pressed, but only whilst being 
    /// detected inside the browser
  }
}

他の投稿者が指摘しているように、ユーザーのポインターがブラウザー環境を離れた/再入力したことを検出できるシステムを実装してみてください。Flash はこれをよりよくサポートしていますが、そこに行きたいとは思わないでしょう...

サイドノート

画像のドラッグを処理する場合、古いバージョンの Internet Explorer では、ドラッグが成功する前に画像に以下を適用する必要がありました。これにより、デフォルトのブラウザーのドラッグ システムが割り込んで邪魔になるのを防ぎました。インライン ハンドラーを使用するよりも、これを実装するためのより良い方法がありますが、ここでは単純さと明確さのためにこれを示します。

<img src="..." ondragstart="return false;" />
于 2012-09-16T08:42:36.753 に答える
1

あなたが説明している状況では、問題はあなたが扱っていることmouseupとmousedown状態だけです。blurマウスがオブジェクトから離れたことを知るために、イベントの処理も考慮する必要があります。に対して同じハンドラを割り当てることができmouseupます。

于 2012-08-30T07:31:02.647 に答える
0

そのようなイベントを処理できる jquery drag を使用しないのはなぜですか?

本当に mouseup と mousedown をバインドしたい場合は、jquery を使用できます

$(object).on("mouseup",function(){});
于 2012-08-30T07:19:19.377 に答える