JavaScript：マウスボタンが押されているかどうかを確認しますか？

JavaScriptで現在マウスボタンが押されているかどうかを検出する方法はありますか？

「マウスダウン」イベントについては知っていますが、それは私が必要としていることではありません。マウスボタンが押された後、それがまだ押されているかどうかを検出できるようにしたいことがあります。

これは可能ですか？

Paxのソリューションについて：ユーザーが意図的または誤って複数のボタンをクリックした場合は機能しません。私がどのように知っているか私に尋ねないでください:-(。

正しいコードは次のようになります。

var mouseDown = 0;
document.body.onmousedown = function() { 
  ++mouseDown;
}
document.body.onmouseup = function() {
  --mouseDown;
}

このようなテストでは：

if(mouseDown){
  // crikey! isn't she a beauty?
}

どのボタンが押されたかを知りたい場合は、mouseDownをカウンターの配列にして、別々のボタンに対して個別にカウントする準備をしてください。

// let's pretend that a mouse doesn't have more than 9 buttons
var mouseDown = [0, 0, 0, 0, 0, 0, 0, 0, 0],
    mouseDownCount = 0;
document.body.onmousedown = function(evt) { 
  ++mouseDown[evt.button];
  ++mouseDownCount;
}
document.body.onmouseup = function(evt) {
  --mouseDown[evt.button];
  --mouseDownCount;
}

これで、どのボタンが正確に押されたかを確認できます。

if(mouseDownCount){
  // alright, let's lift the little bugger up!
  for(var i = 0; i < mouseDown.length; ++i){
    if(mouseDown[i]){
      // we found it right there!
    }
  }
}

上記のコードは、0から始まるボタン番号を渡す標準準拠のブラウザでのみ機能することに注意してください。IEは現在押されているボタンのビットマスクを使用します。

• 「何も押されていない」の場合は0
• 左に1
• 右は2
• 真ん中は4
• 上記の任意の組み合わせ。たとえば、左+中央は5

それに応じてコードを調整してください！練習問題として残します。

また、IEは…「イベント」と呼ばれるグローバルイベントオブジェクトを使用します。

ちなみに、IEはあなたの場合に役立つ機能を備えています。他のブラウザがマウスボタンイベント（onclick、onmousedown、onmouseup）に対してのみ「ボタン」を送信する場合、IEはonmousemoveでも送信します。したがって、ボタンの状態を知る必要があるときにonmousemoveのリッスンを開始し、取得したらすぐにevt.buttonを確認できます。これで、どのマウスボタンが押されたかがわかります。

// for IE only!
document.body.onmousemove = function(){
  if(event.button){
    // aha! we caught a feisty little sheila!
  }
};

もちろん、彼女が死んで動いていない場合は何も得られません。

関連リンク：

• MouseEventのボタン（DOM 2）
• MSDNのボタン

アップデート＃1：document.bodyスタイルのコードを引き継いだ理由がわかりません。ドキュメントに直接イベントハンドラーを添付することをお勧めします。

これは、古い問題であり、ここでは答えはほとんど使用を提唱するようだmousedownとmouseup、ボタンが押されているかどうかを追跡するために。しかし、他の人が指摘したように、mouseupはブラウザ内で実行された場合にのみ起動するため、ボタンの状態を追跡できなくなる可能性があります。

ただし、MouseEvent（現在）は、現在押されているボタンを示します。

• すべての最新のブラウザー（Safariを除く）の場合 MouseEvent.buttons
• Safariの場合、MouseEvent.which（Safariの場合はbuttons未定義になります）をwhich使用しbuttonsます。注：右クリックと中クリックには異なる番号を使用します。

登録するとdocument、mousemoveできるだけ早くユーザーのリリースは外、状態はすぐに彼らは、マウスの背部の内部などのように更新されますので、場合、カーソルは、ブラウザに再び入るとすぐに発生します。

単純な実装は次のようになります。

var leftMouseButtonOnlyDown = false;

function setLeftButtonState(e) {
  leftMouseButtonOnlyDown = e.buttons === undefined 
    ? e.which === 1 
    : e.buttons === 1;
}

document.body.onmousedown = setLeftButtonState;
document.body.onmousemove = setLeftButtonState;
document.body.onmouseup = setLeftButtonState;

より複雑なシナリオが必要な場合（異なるボタン/複数のボタン/コントロールキー）、MouseEventのドキュメントを確認してください。Safariがゲームを上げたとき、またはそうした場合、これは簡単になるはずです。

これに対する最善のアプローチは、次のように、マウスボタンの状態を自分で記録することです。

var mouseDown = 0;
document.body.onmousedown = function() { 
    mouseDown = 1;
}
document.body.onmouseup = function() {
    mouseDown = 0;
}

そして、後であなたのコードで：

if (mouseDown == 1) {
    // the mouse is down, do what you have to do.
}

解決策は良くありません。ドキュメントで「マウスダウン」し、ブラウザの外で「マウスアップ」することもできます。この場合、ブラウザは引き続きマウスがダウンしていると考えます。

唯一の適切な解決策は、IE.eventオブジェクトを使用することです。

私はこれが古い投稿であることを知っていますが、マウスのアップ/ダウンを使用したマウスボタンの追跡が少し不格好だと思ったので、一部の人に魅力的な代替案を見つけました。

<style>
    div.myDiv:active {
        cursor: default;
    }
</style>

<script>
    function handleMove( div ) {
        var style = getComputedStyle( div );
        if (style.getPropertyValue('cursor') == 'default')
        {
            // You're down and moving here!
        }
    }
</script>

<div class='myDiv' onmousemove='handleMove(this);'>Click and drag me!</div>

：activeセレクターは、マウスの上下移動よりもマウスのクリックをより適切に処理します。onmousemoveイベントでその状態を読み取る方法が必要なだけです。そのために、私はカンニングする必要があり、デフォルトのカーソルが「自動」であるという事実に依存し、デフォルトの自動選択である「デフォルト」に変更しました。

getComputedStyleによって返されるオブジェクトでは、ページの外観を混乱させることなくフラグとして使用できる任意のものを使用できます（例：border-color）。

：activeセクションで独自のユーザー定義スタイルを設定したかったのですが、それを機能させることができませんでした。できればもっといいです。

次のスニペットは、document.bodyでmouseDownイベントが発生してから2秒後に「doStuff」関数の実行を試みます。ユーザーがボタンを持ち上げると、mouseUpイベントが発生し、遅延した実行がキャンセルされます。

ブラウザーをまたがるイベントのアタッチにはいくつかの方法を使用することをお勧めします。例を簡略化するために、mousedownプロパティとmouseupプロパティを明示的に設定しました。

function doStuff() {
  // does something when mouse is down in body for longer than 2 seconds
}

var mousedownTimeout;

document.body.onmousedown = function() { 
  mousedownTimeout = window.setTimeout(doStuff, 2000);
}

document.body.onmouseup = function() {
  window.clearTimeout(mousedownTimeout);
}

短くて甘い

以前の回答がどれもうまくいかなかった理由はわかりませんが、ユーレカの瞬間にこの解決策を思いつきました。それは機能するだけでなく、最もエレガントでもあります：

本文タグに追加：

onmouseup="down=0;" onmousedown="down=1;"

次にmyfunction()、down等しい場合にテストして実行します1。

onmousemove="if (down==1) myfunction();"

@Paxと私の回答を組み合わせて、マウスが押されていた時間も取得できます。

var mousedownTimeout,
    mousedown = 0;

document.body.onmousedown = function() {
  mousedown = 0; 
  window.clearInterval(mousedownTimeout);
  mousedownTimeout = window.setInterval(function() { mousedown += 200 }, 200);
}

document.body.onmouseup = function() {
  mousedown = 0;
  window.clearInterval(mousedownTimeout);
}

じゃあ後で：

if (mousedown >= 2000) {
  // do something if the mousebutton has been down for at least 2 seconds
}

あなたは、MouseDownとMouseUpを処理し、フラグを「後で」追跡するためにフラグまたは何かを設定する必要があります... :(

既存のマウスイベントハンドラーを使用して複雑なページ内で作業している場合は、（バブルではなく）キャプチャ時にイベントを処理することをお勧めします。これを行うには、の3番目のパラメータをaddEventListenerに設定しますtrue。

さらに、event.whichマウスイベントではなく、実際のユーザー操作を処理していることを確認することもできますelem.dispatchEvent(new Event('mousedown'))。

var isMouseDown = false;

document.addEventListener('mousedown', function(event) { 
    if ( event.which ) isMouseDown = true;
}, true);

document.addEventListener('mouseup', function(event) { 
    if ( event.which ) isMouseDown = false;
}, true);

ハンドラーをdocument.bodyではなくdocument（またはwindow）に追加します。重要なb / cです。これにより、ウィンドウ外のマウスアップイベントが引き続き記録されます。

MouseEvent API を使用して、押されたボタンをチェックします（ある場合）。

document.addEventListener('mousedown', (e) => console.log(e.buttons))

返品：

1つ以上のボタンを表す数値。複数のボタンを同時に押すと、値が結合されます（たとえば、3はプライマリ+セカンダリです）。

0 : No button or un-initialized
1 : Primary button (usually the left button)
2 : Secondary button (usually the right button)
4 : Auxilary button (usually the mouse wheel button or middle button)
8 : 4th button (typically the "Browser Back" button)
16 : 5th button (typically the "Browser Forward" button)

次のソリューションは、jQueryを使用して、「ページからドラッグしてリリースケース」を処理します。

$(document).mousedown(function(e) {
    mouseDown = true;
}).mouseup(function(e) {
    mouseDown = false;
}).mouseleave(function(e) {
    mouseDown = false;
});

複数のマウスボタンの処理方法がわかりません。ウィンドウの外でクリックを開始する方法があった場合、マウスをウィンドウに近づけると、おそらくここでも正しく機能しません。

jQueryの例の下で、マウスが$（ '。element'）上にある場合、押されたマウスボタンに応じて色が変化します。

var clicableArea = {
    init: function () {
        var self = this;
        ('.element').mouseover(function (e) {
            self.handlemouseClick(e, $(this));
        }).mousedown(function (e) {
            self.handlemouseClick(e, $(this));
        });
    },
    handlemouseClick: function (e, element) {
        if (e.buttons === 1) {//left button
            element.css('background', '#f00');
        }
        if (e.buttons === 2) { //right buttom
            element.css('background', 'none');
        }
    }
};
$(document).ready(function () {
    clicableArea.init();
});

@ジャックが言ったmouseupように、ブラウザウィンドウの外で発生した場合、私たちはそれを認識していません...

このコードは（ほとんど）私のために働きました：

window.addEventListener('mouseup', mouseUpHandler, false);
window.addEventListener('mousedown', mouseDownHandler, false);

残念ながら、mouseupこれらのいずれかの場合にはイベントを取得できません。

• ユーザーがキーボードのキーとマウスボタンを同時に押し、ブラウザウィンドウの外でマウスボタンを離してから、キーを離す。
• ユーザーが2つのマウスボタンを同時に押し、1つのマウスボタンを離してから、もう一方のボタンをブラウザウィンドウの外側で離します。

ええと、イベント後にダウンしているかどうかは確認できませんが、アップしているかどうかは確認できます。

したがって、ユーザーがボタンを押すと（onMouseDownイベント）...その後、アップかどうか（onMouseUp）を確認します。稼働していない場合でも、必要なことを実行できます。

        var mousedown = 0;
        $(function(){
            document.onmousedown = function(e){
                mousedown = mousedown | getWindowStyleButton(e);
                e = e || window.event;
                console.log("Button: " + e.button + " Which: " + e.which + " MouseDown: " + mousedown);
            }

            document.onmouseup = function(e){
                mousedown = mousedown ^ getWindowStyleButton(e);
                e = e || window.event;
                console.log("Button: " + e.button + " Which: " + e.which + " MouseDown: " + mousedown);
            }

            document.oncontextmenu = function(e){
                // to suppress oncontextmenu because it blocks
                // a mouseup when two buttons are pressed and 
                // the right-mouse button is released before
                // the other button.
                return false;
            }
        });

        function getWindowStyleButton(e){
            var button = 0;
                if (e) {
                    if (e.button === 0) button = 1;
                    else if (e.button === 1) button = 4;
                    else if (e.button === 2) button = 2;  
                }else if (window.event){
                    button = window.event.button;
                }
            return button;
        }

このクロスブラウザバージョンは私には問題なく動作します。