JavaScript: Periksa apakah tombol mouse turun?

Adakah cara untuk mendeteksi jika tombol mouse saat ini tidak aktif di JavaScript?

Saya tahu tentang acara "mousedown", tapi bukan itu yang saya butuhkan. Beberapa saat SETELAH tombol mouse ditekan, saya ingin dapat mendeteksi apakah masih ditekan.

Apakah ini mungkin?

Mengenai solusi Pax: tidak berfungsi jika pengguna mengklik lebih dari satu tombol secara sengaja atau tidak sengaja. Jangan tanya saya bagaimana saya tahu :-(.

Kode yang benar harus seperti itu:

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

Dengan tes seperti ini:

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

Jika Anda ingin mengetahui tombol apa yang ditekan, bersiaplah untuk membuat mouseDown sebagai array penghitung dan menghitungnya secara terpisah untuk tombol terpisah:

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

Sekarang Anda dapat memeriksa tombol apa yang ditekan dengan tepat:

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

Sekarang diperingatkan bahwa kode di atas hanya akan berfungsi untuk browser yang memenuhi standar yang memberikan Anda nomor tombol mulai dari 0 dan lebih tinggi. IE menggunakan sedikit topeng dari tombol yang saat ini ditekan:

• 0 untuk "tidak ada yang ditekan"
• 1 untuk kiri
• 2 untuk kanan
• 4 untuk tengah
• dan kombinasi apapun di atas, misalnya 5 untuk kiri + tengah

Jadi sesuaikan kode Anda dengan benar! Saya tinggalkan sebagai latihan.

Dan ingat: IE menggunakan objek event global yang disebut… "event".

Secara kebetulan, IE memiliki fitur yang berguna dalam kasus Anda: ketika browser lain mengirim "tombol" hanya untuk aktivitas tombol mouse (onclick, onmousedown, dan onmouseup), IE juga mengirimkannya dengan onmousemove. Jadi, Anda dapat mulai mendengarkan onmousemove saat Anda perlu mengetahui status tombol, dan memeriksa tombol evt. segera setelah Anda mendapatkannya - sekarang Anda tahu tombol mouse apa yang ditekan:

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

Tentu saja Anda tidak mendapatkan apa-apa jika dia berpura-pura mati dan tidak bergerak.

Tautan yang relevan:

• Tombol MouseEvent (DOM 2)
• Tombol MSDN

Pembaruan # 1 : Saya tidak tahu mengapa saya membawa-bawa kode document.body-style. Akan lebih baik untuk melampirkan penangan kejadian langsung ke dokumen.

Ini adalah pertanyaan lama, dan jawabannya di sini tampaknya sebagian besar menganjurkan untuk menggunakan mousedowndan mouseupmelacak apakah sebuah tombol ditekan. Namun seperti yang ditunjukkan orang lain, mouseuphanya akan aktif saat dijalankan di dalam browser, yang dapat menyebabkan hilangnya jejak status tombol.

Namun, MouseEvent (sekarang) menunjukkan tombol mana yang saat ini ditekan:

• Untuk semua penggunaan browser modern (kecuali Safari) MouseEvent.buttons
• Untuk Safari, gunakan MouseEvent.which( buttonstidak ditentukan untuk Safari) Catatan: whichmenggunakan nomor berbeda dari buttonsuntuk klik Kanan dan Tengah.

Ketika terdaftar pada document, mousemoveakan segera aktif segera setelah kursor masuk kembali ke browser, jadi jika pengguna melepaskan di luar maka status akan diperbarui segera setelah mereka kembali ke dalam.

Penerapan sederhana mungkin terlihat seperti:

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;

Jika skenario yang lebih rumit diperlukan (tombol berbeda / beberapa tombol / tombol kontrol), lihat dokumen MouseEvent. Saat / jika Safari mengangkat permainannya, ini akan menjadi lebih mudah.

Saya pikir pendekatan terbaik untuk ini adalah dengan menyimpan catatan Anda sendiri tentang status tombol mouse, sebagai berikut:

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

lalu, nanti di kode Anda:

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

solusinya tidak bagus. seseorang dapat melakukan "mousedown" pada dokumen, lalu "mouseup" di luar browser, dan dalam hal ini browser akan tetap berpikir mouse sedang down.

satu-satunya solusi yang baik adalah menggunakan objek IE.event.

Saya tahu ini adalah posting lama, tetapi saya pikir pelacakan tombol mouse menggunakan mouse naik / turun terasa agak kikuk, jadi saya menemukan alternatif yang mungkin menarik bagi sebagian orang.

<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>

Selektor aktif menangani klik mouse jauh lebih baik daripada mouse atas / bawah, Anda hanya perlu cara membaca status itu di acara onmousemove. Untuk itu saya perlu menipu dan mengandalkan fakta bahwa kursor default adalah "auto" dan saya hanya mengubahnya menjadi "default", yang secara otomatis memilih default.

Anda dapat menggunakan apa pun di objek yang dikembalikan oleh getComputedStyle yang dapat Anda gunakan sebagai bendera tanpa mengganggu tampilan halaman Anda, misalnya warna batas.

Saya ingin mengatur gaya saya sendiri yang ditentukan pengguna di: bagian aktif, tetapi saya tidak bisa membuatnya bekerja. Akan lebih baik jika memungkinkan.

Cuplikan berikut akan mencoba menjalankan fungsi "doStuff" 2 detik setelah peristiwa mouseDown terjadi di document.body. Jika pengguna mengangkat tombol, peristiwa mouseUp akan terjadi dan membatalkan eksekusi yang tertunda.

Saya akan menyarankan menggunakan beberapa metode untuk lampiran acara lintas-browser - mengatur properti mousedown dan mouseup secara eksplisit dilakukan untuk menyederhanakan contoh.

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

Pendek dan manis

Saya tidak yakin mengapa tidak ada jawaban sebelumnya yang berhasil untuk saya, tetapi saya menemukan solusi ini selama momen eureka. Ini tidak hanya berfungsi, tetapi juga paling elegan:

Tambahkan ke tag tubuh:

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

Kemudian uji dan jalankan myfunction()jika downsama dengan 1:

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

Jika Anda bekerja di dalam halaman yang kompleks dengan event handler mouse yang ada, saya sarankan untuk menangani event tersebut saat ditangkap (bukan gelembung). Untuk melakukan ini, cukup setel parameter ke-3 dari addEventListenermenjadi true.

Selain itu, Anda mungkin ingin memeriksa untuk event.whichmemastikan Anda menangani interaksi pengguna yang sebenarnya dan bukan kejadian mouse, mis 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);

Tambahkan penangan ke dokumen (atau jendela) alih-alih document.body penting b / c ini memastikan bahwa peristiwa mouseup di luar jendela masih direkam.

Anda dapat menggabungkan @Pax dan jawaban saya untuk juga mendapatkan durasi mouse turun selama:

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

Kemudian nanti:

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

Anda perlu menangani MouseDown dan MouseUp dan menyetel beberapa bendera atau sesuatu untuk melacaknya "nanti di jalan" ... :(

Menggunakan api MouseEvent , untuk memeriksa tombol yang ditekan, jika ada:

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

Kembali :

Angka yang mewakili satu atau lebih tombol. Untuk lebih dari satu tombol yang ditekan secara bersamaan, nilainya digabungkan (misalnya, 3 adalah primer + sekunder).

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)

Menggunakan jQuery, solusi berikut bahkan menangani "seret halaman lalu lepaskan kasus".

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

Saya tidak tahu bagaimana cara menangani beberapa tombol mouse. Jika ada cara untuk memulai klik di luar jendela, lalu mengarahkan mouse ke jendela, ini mungkin juga tidak akan berfungsi dengan baik di sana.

Di bawah contoh jQuery, ketika mouse lebih dari $ ('. Element'), warna berubah tergantung pada tombol mouse mana yang ditekan.

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();
});

Seperti yang dikatakan @Jack, kapan mouseup terjadi di luar jendela browser, kami tidak menyadarinya ...

Kode ini (hampir) berfungsi untuk saya:

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

Sayangnya, saya tidak akan mendapatkan mouseupacara di salah satu kasus tersebut:

• pengguna secara bersamaan menekan tombol keyboard dan tombol mouse, melepaskan tombol mouse di luar jendela browser lalu melepaskan tombol.
• pengguna menekan dua tombol mouse secara bersamaan, melepaskan satu tombol mouse lalu tombol lainnya, keduanya di luar jendela browser.

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

versi lintas-browser ini berfungsi dengan baik untuk saya.

Nah, Anda tidak bisa mengecek apakah turun setelah acara, tapi Anda bisa mengecek apakah itu Naik ... Jika sudah naik .. artinya tidak lagi turun: P lol

Jadi pengguna menekan tombol bawah (acara onMouseDown) ... dan setelah itu, Anda memeriksa apakah sudah naik (onMouseUp). Meskipun belum habis, Anda dapat melakukan apa yang Anda butuhkan.