Rumah hujung hadapan web tutorial js jQuery中如何完美解决Chrome下的mousemove事件bug?

jQuery中如何完美解决Chrome下的mousemove事件bug?

Jun 28, 2017 am 10:41 AM
chrome jquery selesaikan

在Chrome下有一个关于mousemove的bug是:
1.在触发mouseup事件时,包括在触发click和contextmenu时,也会触发mousemove事件;
2.更诡异的是,当你连续的触发contextmenu事件时,mousedown事件会被mousemove代替,
目前我想到的一个解决方案,通过时间戳比较:

var body = document.querySelector("h1");
var timeStamp;

body.addEventListener("mousedown", function (e) {
    console.log("mouse down");
}, false);

body.addEventListener("mouseup", function (e) {
    console.log("mouse up");
    timeStamp = e.timeStamp;
})

body.addEventListener("mousemove", function (e) {
    if (!timeStamp || ( e.timeStamp - timeStamp > 10)) {
        console.log("mouse move");    
    }
})
Salin selepas log masuk

这样能避免在触发click事件,或者触发鼠标左键mouseup引起的mousemove,但是对于上面描述的contextmenu引起的mousemove还是不能很好解决

请问有什么完美的解决办法吗?还是只能尽可能避免这种情况

<input type="text" id="a1" />

$("#a1").mousemove(function(){
	if ($(this).data("x") === event.pageX && $(this).data("y") === event.pageY) {
		return false;
	}
	$(this).data({"x":event.pageX, "y":event.pageY});
	$(this).after("1");
})
Salin selepas log masuk

用jq是为了在所有浏览器下用.data()。思路就是这么个思路,你自己去改吧。

还有,一个元素绑定mousemove之后就别再绑定别的事件。

最后:尽量别用mousemove,太费资源。

可以通过比较mousedown的位置来确认是否是move操作

document.onmousemove = function(e) {  
// 不是move操作  if (x === mouseDown.x && y === mouseDown.y) {
        return false;
    }};
document.onmousedown = function (e) {  
mouseDown = { x: e.clientX, y: e.clientY };};
Salin selepas log masuk


Atas ialah kandungan terperinci jQuery中如何完美解决Chrome下的mousemove事件bug?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Tetapan grafik terbaik
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Cara Membuka Segala -galanya Di Myrise
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Penyelesaian kepada masalah bahawa sistem Win11 tidak dapat memasang pek bahasa Cina Penyelesaian kepada masalah bahawa sistem Win11 tidak dapat memasang pek bahasa Cina Mar 09, 2024 am 09:48 AM

Penyelesaian kepada masalah sistem Win11 tidak dapat memasang pek bahasa Cina Dengan pelancaran sistem Windows 11, ramai pengguna mula menaik taraf sistem pengendalian mereka untuk mengalami fungsi dan antara muka baharu. Walau bagaimanapun, sesetengah pengguna mendapati bahawa mereka tidak dapat memasang pek bahasa Cina selepas menaik taraf, yang menyusahkan pengalaman mereka. Dalam artikel ini, kami akan membincangkan sebab mengapa sistem Win11 tidak dapat memasang pek bahasa Cina dan menyediakan beberapa penyelesaian untuk membantu pengguna menyelesaikan masalah ini. Analisis sebab Pertama, mari kita menganalisis ketidakupayaan sistem Win11 untuk

Apakah Updater.exe dalam Windows 11/10? Adakah ini proses Chrome? Apakah Updater.exe dalam Windows 11/10? Adakah ini proses Chrome? Mar 21, 2024 pm 05:36 PM

Setiap aplikasi yang anda jalankan pada Windows mempunyai program komponen untuk mengemas kininya. Jadi jika anda menggunakan Google Chrome atau Google Earth, ia akan menjalankan aplikasi GoogleUpdate.exe, menyemak sama ada kemas kini tersedia, dan kemudian mengemas kininya berdasarkan tetapan. Walau bagaimanapun, jika anda tidak lagi melihatnya dan sebaliknya melihat proses updater.exe dalam Pengurus Tugas Windows 11/10, ada sebab untuk ini. Apakah Updater.exe dalam Windows 11/10? Google telah melancarkan kemas kini untuk semua aplnya seperti Google Earth, Google Drive, Chrome, dsb. Kemas kini ini membawa

Lima petua untuk mengajar anda cara menyelesaikan masalah telefon Black Shark tidak dihidupkan! Lima petua untuk mengajar anda cara menyelesaikan masalah telefon Black Shark tidak dihidupkan! Mar 24, 2024 pm 12:27 PM

Apabila teknologi telefon pintar terus berkembang, telefon bimbit memainkan peranan yang semakin penting dalam kehidupan seharian kita. Sebagai telefon perdana yang memfokuskan pada prestasi permainan, telefon Black Shark sangat digemari oleh pemain. Namun, kadangkala kita juga menghadapi situasi telefon Black Shark tidak boleh dihidupkan Pada masa ini, kita perlu mengambil beberapa langkah untuk menyelesaikan masalah ini. Seterusnya, izinkan kami berkongsi lima petua untuk mengajar anda cara menyelesaikan masalah telefon Black Shark tidak dihidupkan: Langkah 1: Periksa kuasa bateri Pertama, pastikan telefon Black Shark anda mempunyai kuasa yang mencukupi. Ia mungkin kerana bateri telefon telah habis

Pemacu tidak boleh dimuatkan pada peranti ini Bagaimana untuk menyelesaikannya? (Diuji secara peribadi dan sah) Pemacu tidak boleh dimuatkan pada peranti ini Bagaimana untuk menyelesaikannya? (Diuji secara peribadi dan sah) Mar 14, 2024 pm 09:00 PM

Semua orang tahu bahawa jika komputer tidak dapat memuatkan pemacu, peranti mungkin tidak berfungsi dengan betul atau berinteraksi dengan komputer dengan betul. Jadi bagaimana kita menyelesaikan masalah apabila kotak gesaan muncul pada komputer bahawa pemandu tidak boleh dimuatkan pada peranti ini? Editor di bawah akan mengajar anda dua cara untuk menyelesaikan masalah dengan mudah. Tidak dapat memuatkan pemacu pada peranti ini Penyelesaian 1. Cari "Pengasingan Kernel" dalam menu Mula. 2. Matikan Integriti Memori, dan ia akan menggesa "Integriti Memori telah dimatikan. Peranti anda mungkin terdedah. Klik di belakang untuk mengabaikannya, dan ia tidak akan menjejaskan penggunaan." 3. Masalah boleh diselesaikan selepas menghidupkan semula mesin.

Bagaimana untuk menyelesaikan masalah menyimpan gambar secara automatik semasa menerbitkan di Xiaohongshu? Di manakah imej yang disimpan secara automatik semasa menyiarkan? Bagaimana untuk menyelesaikan masalah menyimpan gambar secara automatik semasa menerbitkan di Xiaohongshu? Di manakah imej yang disimpan secara automatik semasa menyiarkan? Mar 22, 2024 am 08:06 AM

Dengan perkembangan media sosial yang berterusan, Xiaohongshu telah menjadi platform untuk lebih ramai golongan muda berkongsi kehidupan mereka dan menemui perkara yang indah. Ramai pengguna bermasalah dengan isu autosimpan semasa menyiarkan imej. Jadi, bagaimana untuk menyelesaikan masalah ini? 1. Bagaimana untuk menyelesaikan masalah menyimpan gambar secara automatik semasa menerbitkan di Xiaohongshu? 1. Kosongkan cache Pertama, kita boleh cuba mengosongkan data cache Xiaohongshu. Langkah-langkahnya adalah seperti berikut: (1) Buka Xiaohongshu dan klik butang "Saya" di sudut kanan bawah (2) Pada halaman tengah peribadi, cari "Tetapan" dan klik padanya (3) Tatal ke bawah dan cari "; Kosongkan Cache". Klik OK. Selepas mengosongkan cache, masukkan semula Xiaohongshu dan cuba siarkan gambar untuk melihat sama ada masalah penjimatan automatik telah diselesaikan. 2. Kemas kini versi Xiaohongshu untuk memastikan bahawa Xiaohongshu anda

Apakah direktori pemasangan sambungan pemalam Chrome? Apakah direktori pemasangan sambungan pemalam Chrome? Mar 08, 2024 am 08:55 AM

Apakah direktori pemasangan sambungan pemalam Chrome? Dalam keadaan biasa, direktori pemasangan lalai pelanjutan pemalam Chrome adalah seperti berikut: 1. Lokasi direktori pemasangan lalai pemalam chrome dalam windowsxp: C:\DocumentsandSettings\username\LocalSettings\ApplicationData\Google\Chrome\UserData\ Default\Extensions2 chrome dalam windows7 Lokasi direktori pemasangan lalai pemalam: C:\Users\username\AppData\Local\Google\Chrome\User.

Panduan untuk menyelesaikan masalah pemasangan WordPress dalam satu artikel Panduan untuk menyelesaikan masalah pemasangan WordPress dalam satu artikel Feb 29, 2024 am 11:06 AM

WordPress ialah sistem pengurusan kandungan sumber terbuka yang sangat popular Ramai pengguna dan perniagaan individu memilih untuk menggunakan WordPress untuk membina dan mengurus tapak web mereka sendiri. Walau bagaimanapun, semasa pemasangan WordPress, anda kadangkala menghadapi beberapa masalah, seperti ralat sambungan pangkalan data, isu kebenaran fail, dsb. Artikel ini akan memberikan panduan untuk menyelesaikan masalah pemasangan WordPress biasa dan membantu pengguna menyelesaikan masalah dengan cepat melalui contoh kod tertentu. Masalah 1: Ralat sambungan pangkalan data semasa memasang WordPress

Mentafsir ralat Oracle 3114: punca dan penyelesaian Mentafsir ralat Oracle 3114: punca dan penyelesaian Mar 08, 2024 pm 03:42 PM

Tajuk: Analisis Ralat Oracle 3114: Punca dan Penyelesaian Apabila menggunakan pangkalan data Oracle, anda sering menghadapi pelbagai kod ralat, antaranya ralat 3114 adalah yang biasa. Ralat ini biasanya melibatkan masalah pautan pangkalan data, yang mungkin menyebabkan pengecualian apabila mengakses pangkalan data. Artikel ini akan mentafsir ralat Oracle 3114, membincangkan puncanya dan memberikan kaedah khusus untuk menyelesaikan ralat dan contoh kod yang berkaitan. 1. Definisi ralat 3114 ralat Oracle 3114 lulus

See all articles