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?
Jawaban:
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:
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:
Pembaruan # 1 : Saya tidak tahu mengapa saya membawa-bawa kode document.body-style. Akan lebih baik untuk melampirkan penangan kejadian langsung ke dokumen.
sumber
event.buttons
ke pemicu peristiwa apa pun yang Anda gunakan, tanpa variabel simpanan eksternal. Saya mengajukan pertanyaan baru (karena acara mouseup saya tidak selalu aktif, jadi solusi ini tidak berfungsi untuk saya) dan mendapatkan jawaban itu mungkin dalam waktu paling lama 5 menit.Ini adalah pertanyaan lama, dan jawabannya di sini tampaknya sebagian besar menganjurkan untuk menggunakan
mousedown
danmouseup
melacak apakah sebuah tombol ditekan. Namun seperti yang ditunjukkan orang lain,mouseup
hanya akan aktif saat dijalankan di dalam browser, yang dapat menyebabkan hilangnya jejak status tombol.Namun, MouseEvent (sekarang) menunjukkan tombol mana yang saat ini ditekan:
MouseEvent.buttons
MouseEvent.which
(buttons
tidak ditentukan untuk Safari) Catatan:which
menggunakan nomor berbeda daributtons
untuk klik Kanan dan Tengah.Ketika terdaftar pada
document
,mousemove
akan 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.
sumber
e.buttons
akan1+2=3
, jadie.buttons === 1
akan salah). Jika Anda ingin memeriksa apakah tombol utama mati, tetapi tidak peduli dengan status tombol lainnya, lakukan ini:(e.buttons & 1) === 1
MouseEvent.buttons
, tampaknya itu7
berarti bahwa tombol Utama, Sekunder dan Tambahan semuanya ditekan bersamaan. Saya tidak yakin mengapa ini terjadi - apakah Anda menggunakan mouse tingkat lanjut? Jika demikian, mungkin ada baiknya mencoba dengan yang dasar. Jika Anda hanya ingin menjalankannya, Anda dapat menggunakan pemeriksaan bitwise untuk memastikan bahwa tombol kiri ditekan dan mengabaikan yang lain. misalnya.MouseEvent.buttons & 1 === 1
.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. }
sumber
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.
sumber
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.
sumber
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); }
sumber
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()
jikadown
sama dengan1
:onmousemove="if (down==1) myfunction();"
sumber
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
addEventListener
menjaditrue
.Selain itu, Anda mungkin ingin memeriksa untuk
event.which
memastikan Anda menangani interaksi pengguna yang sebenarnya dan bukan kejadian mouse, miselem.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.
sumber
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 }
sumber
Anda perlu menangani MouseDown dan MouseUp dan menyetel beberapa bendera atau sesuatu untuk melacaknya "nanti di jalan" ... :(
sumber
Menggunakan api MouseEvent , untuk memeriksa tombol yang ditekan, jika ada:
document.addEventListener('mousedown', (e) => console.log(e.buttons))
Kembali :
sumber
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.
sumber
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(); });
sumber
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
mouseup
acara di salah satu kasus tersebut:sumber
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.
sumber
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.
sumber