Saya ingin dapat mendeteksi saat mouse meninggalkan jendela sehingga saya dapat menghentikan pengaktifan peristiwa saat mouse pengguna berada di tempat lain.
Ada ide bagaimana melakukan ini?
Saya ingin dapat mendeteksi saat mouse meninggalkan jendela sehingga saya dapat menghentikan pengaktifan peristiwa saat mouse pengguna berada di tempat lain.
Ada ide bagaimana melakukan ini?
Jawaban:
Harap diingat bahwa jawaban saya sudah sangat tua.
Jenis perilaku ini biasanya diinginkan saat menerapkan perilaku seret-lepas di halaman html. Solusi di bawah ini telah diuji pada IE 8.0.6, FireFox 3.6.6, Opera 10.53, dan Safari 4 pada mesin MS Windows XP.
Pertama, fungsi kecil dari Peter-Paul Koch; penangan acara lintas browser:
Dan kemudian gunakan metode ini untuk melampirkan event handler ke objek dokumen mouseout event:
Terakhir, berikut adalah halaman html dengan skrip yang disematkan untuk debugging:
sumber
Jika Anda menggunakan jQuery, bagaimana dengan kode pendek dan manis ini -
Peristiwa ini akan terpicu setiap kali mouse tidak ada di halaman Anda seperti yang Anda inginkan. Ubah saja fungsinya untuk melakukan apa pun yang Anda inginkan.
Dan Anda juga bisa menggunakan:
Untuk memicu ketika mouse masuk kembali ke halaman itu lagi.
Sumber: https://stackoverflow.com/a/16029966/895724
sumber
Ini bekerja untuk saya:
sumber
addEvent
?if (!evt.toElement && !evt.relatedTarget)
Untuk mendeteksi mouseleave tanpa memperhitungkan scroll bar dan kolom lengkapi otomatis atau periksa:
Penjelasan kondisi:
======================== EDIT ========================= ======
document.addEventListener ("mouseleave") tampaknya tidak diaktifkan pada versi firefox baru, mouseleave perlu dilampirkan ke elemen seperti body, atau elemen turunan.
Saya menyarankan untuk menggunakan sebagai gantinya
Atau
sumber
Menggunakan acara onMouseLeave mencegah gelembung menggelembung dan memungkinkan Anda mendeteksi dengan mudah saat mouse meninggalkan jendela browser.
http://www.w3schools.com/jsref/event_onmouseleave.asp
sumber
document.onmouseleave = function() { alert('You left!') };
Gunakan bukan document.body yang menembakkan di atas scroll bar yang mengecilkan tubuh! Kode untuk mencegah kebakaran pada elemen tidak diperlukan. Penjelasan yang bagus: developer.mozilla.org/en-US/docs/Web/API/Element/…Tak satu pun dari jawaban ini berhasil untuk saya. Saya sekarang menggunakan:
Saya menggunakan ini untuk widget pengunggahan file seret dan lepas. Ini tidak sepenuhnya akurat, dipicu saat mouse mencapai jarak tertentu dari tepi jendela.
sumber
Saya sudah mencoba semua hal di atas, tetapi tidak ada yang berfungsi seperti yang diharapkan. Setelah sedikit riset, saya menemukan bahwa e.relatedTarget adalah html tepat sebelum mouse keluar dari jendela .
Jadi ... saya berakhir dengan ini:
Beri tahu saya jika Anda menemukan masalah atau peningkatan!
Pembaruan 2019
(seperti yang ditemukan pengguna1084282)
sumber
relatedTarget
adalah null saat mouse meninggalkan jendela. Terinspirasi oleh jawaban @ user1084282, ubah menjadi ini:if(!e.relatedTarget && !e.toElement) { ... }
dan berfungsiif(!e.relatedTarget && !e.toElement)
alih-alih kondisi di jawaban yang sebenarnya. Ini mendeteksi mouse meninggalkan badan dokumen.Saya menarik kembali apa yang saya katakan. Itu mungkin. Saya menulis kode ini, bekerja dengan sempurna.
bekerja di chrome, firefox, opera. Tidak diuji di IE, tetapi asumsikan berhasil.
edit. IE selalu menyebabkan masalah. Untuk membuatnya berfungsi di IE, ganti acara dari jendela ke dokumen:
menggabungkannya untuk deteksi kursor crossbrowser kick ass o0: P
sumber
terapkan css ini:
Ini memastikan bahwa elemen html memenuhi seluruh tinggi jendela.
terapkan jquery ini:
Masalah dengan gerakan mouse dan gerakan mouse adalah bahwa jika Anda mengarahkan mouse ke atas / keluar dari html ke elemen anak itu akan memicu acara. Fungsi yang saya berikan tidak diaktifkan saat mengarahkan mouse ke elemen anak. Ini hanya menyala ketika Anda mengarahkan mouse ke luar / masuk jendela
hanya untuk Anda ketahui, Anda dapat melakukannya saat pengguna mengarahkan mouse di jendela:
sumber
Saya mencoba satu demi satu dan menemukan jawaban terbaik pada saat itu:
https://stackoverflow.com/a/3187524/985399
Saya melewati peramban lama jadi saya mempersingkat kodenya untuk bekerja di peramban modern (IE9 +)
Di sini Anda melihat dukungan browser
Itu cukup singkat, pikirku
Namun masalah tetap ada karena "mouseout" memicu semua elemen dalam dokumen .
Untuk mencegahnya, gunakan mouseleave (IE5.5 +). Lihat penjelasan bagusnya di link.
Kode berikut bekerja tanpa memicu elemen di dalam elemen berada di dalam atau di luar. Coba juga drag-release di luar dokumen.
Anda dapat mengatur acara di elemen HTML apa pun.
document.body
Namun, jangan biarkan acara tersebut aktif , karena bilah gulir jendela dapat mengecilkan isi dan menyala saat penunjuk mouse berada di atas bilah gulir saat Anda ingin menggulir tetapi tidak ingin memicu peristiwa mouseLeave di atasnya. Nyalakan sajadocument
, seperti pada contoh.sumber
Mungkin jika Anda terus-menerus mendengarkan OnMouseOver di tag body, maka callback saat acara tidak terjadi, tetapi, seperti yang dikatakan Zack, ini bisa sangat buruk, karena tidak semua browser menangani acara dengan cara yang sama, bahkan ada beberapa kemungkinan bahwa Anda kehilangan MouseOver bahkan dengan berada di atas div di halaman yang sama.
sumber
Mungkin ini akan membantu beberapa dari mereka yang datang ke sini nanti.
window.onblur
dandocument.mouseout
.window.onblur
dipicu ketika:Ctrl+Tab
atauCmd+Tab
.Pada dasarnya setiap kali tab browser kehilangan fokus.
document.mouseout
dipicu ketika:Ctrl+Tab
atauCmd+Tab
.Pada dasarnya kapan pun kursor Anda meninggalkan dokumen.
sumber
window.onblur
juga. +1Ini mungkin sedikit hacky tetapi hanya akan terpicu ketika mouse meninggalkan jendela. Saya terus menonton acara anak-anak dan ini menyelesaikannya
sumber
sumber
Ini berhasil untuk saya. Kombinasi dari beberapa jawaban di sini. Dan saya memasukkan kode yang menunjukkan model hanya sekali. Dan model tersebut akan hilang saat diklik di tempat lain.
sumber
Lihat
mouseover
danmouseout
.sumber
Saya belum menguji ini, tetapi naluri saya adalah melakukan panggilan fungsi OnMouseOut pada tag body.
sumber
Ini akan bekerja di chrome,
sumber