160

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

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

これは可能ですか？

4

17 に答える 17

163

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!
  }
};

もちろん、彼女が死んで動かないふりをしても何も得られません。

関連リンク:

更新 #1 : なぜ document.body スタイルのコードを引き継いだのかわかりません。イベント ハンドラーをドキュメントに直接アタッチすることをお勧めします。

于 2008-11-27T02:53:36.613 に答える
22

これに対する最善のアプローチは、次のように、マウス ボタンの状態を独自に記録しておくことだと思います。

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.
}
于 2008-11-27T00:48:03.373 に答える
13

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

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

于 2010-12-26T08:14:39.987 に答える
4

次のスニペットは、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);
}
于 2008-11-27T00:34:42.477 に答える
2

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

于 2008-11-29T22:29:21.250 に答える
2

次のソリューションでは、jQuery を使用して、「ページからドラッグしてから解放する」場合も処理します。

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

複数のマウスボタンをどのように処理するのかわかりません。ウィンドウの外でクリックを開始してからマウスをウィンドウ内に持ってくる方法があった場合、これもおそらく適切に機能しません。

于 2014-01-04T20:12:41.163 に答える
2

短くて甘い

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

body タグに追加:

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

次に、等しいmyfunction()かどうかをテストして実行します。down1

onmousemove="if (down==1) myfunction();"
于 2012-08-12T14:07:50.577 に答える
2

@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
}
于 2008-11-27T00:54:48.460 に答える
2

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)
于 2019-07-24T10:47:47.097 に答える
0

@Jackが言ったmouseupように、ブラウザウィンドウの外で起こったとき、私たちはそれに気づいていません...

このコードは（ほぼ）私にとってはうまくいきました：

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

残念ながら、mouseupこれらのケースのいずれかでイベントを取得できません。

  • ユーザーがキーボードのキーとマウス ボタンを同時に押し、ブラウザ ウィンドウの外でマウス ボタンを放してから、キーを放します。
  • ユーザーが2 つのマウス ボタンを同時に押し、1 つのマウス ボタンを離してからもう 1 つのマウス ボタンを離します。どちらもブラウザ ウィンドウの外にあります。
于 2017-09-20T08:14:51.350 に答える
0

以下の 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();
});
于 2015-06-25T05:05:13.440 に答える
-3

まあ、イベント後にダウンしているかどうかは確認できませんが、アップしているかどうかは確認できます...アップしている場合..ダウンしていないことを意味します:P笑

したがって、ユーザーはボタンを押し下げます (onMouseDown イベント) ... その後、ボタンが押されているかどうかを確認します (onMouseUp)。稼働していない間は、必要なことを行うことができます。

于 2008-11-26T22:37:31.793 に答える