웹 프론트엔드 JS 튜토리얼 jQuery의 Chrome에서 mousemove 이벤트 버그를 완벽하게 해결하는 방법은 무엇입니까?

jQuery의 Chrome에서 mousemove 이벤트 버그를 완벽하게 해결하는 방법은 무엇입니까?

Jun 28, 2017 am 10:41 AM
chrome jquery 해결하다

Chrome에는 mousemove에 대한 버그가 있습니다.
1. 클릭 및 컨텍스트 메뉴가 트리거될 때를 포함하여 mouseup 이벤트가 트리거되면 mousemove 이벤트도 트리거됩니다.
2.
현재 제가 생각하는 해결책은 timestamp를 통해 비교하는 것입니다.

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");    
    }
})
로그인 후 복사

이렇게 하면 클릭 이벤트가 발생하거나 다음으로 인한 mousemove가 발생하는 것을 방지할 수 있습니다. 마우스 왼쪽 버튼을 mouseup했는데 위에서 설명한 컨텍스트 메뉴로 인한 마우스 이동이 여전히 잘 해결되지 않습니다

완벽한 해결책이 있을까요? 아니면 이 상황을 최대한 피할 수 밖에 없습니다

<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");
})
로그인 후 복사

jq를 사용한다는 것은 모든 브라우저에서 .data()를 사용한다는 것입니다. 이것이 사고 방식이므로 스스로 바꿀 수 있습니다.

또한 요소가 mousemove에 바인딩된 후에는 다른 이벤트를 바인딩하지 마세요.

마지막으로: mousemove를 사용하지 마십시오. 너무 많은 리소스를 소모합니다.

마우스다운 위치를 비교하면 이동작업인지 확인할 수 있습니다

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 };};
로그인 후 복사


위 내용은 jQuery의 Chrome에서 mousemove 이벤트 버그를 완벽하게 해결하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

인기 기사

R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 최고의 그래픽 설정
3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 아무도들을 수없는 경우 오디오를 수정하는 방법
3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

Win11 시스템에서 중국어 언어 팩을 설치할 수 없는 문제에 대한 해결 방법 Win11 시스템에서 중국어 언어 팩을 설치할 수 없는 문제에 대한 해결 방법 Mar 09, 2024 am 09:48 AM

Win11 시스템에서 중국어 언어 팩을 설치할 수 없는 문제 해결 Windows 11 시스템이 출시되면서 많은 사용자들이 새로운 기능과 인터페이스를 경험하기 위해 운영 체제를 업그레이드하기 시작했습니다. 그러나 일부 사용자는 업그레이드 후 중국어 언어 팩을 설치할 수 없어 경험에 문제가 있다는 사실을 발견했습니다. 이 기사에서는 Win11 시스템이 중국어 언어 팩을 설치할 수 없는 이유에 대해 논의하고 사용자가 이 문제를 해결하는 데 도움이 되는 몇 가지 솔루션을 제공합니다. 원인 분석 먼저 Win11 시스템의 무능력을 분석해 보겠습니다.

Windows 11/10의 Updater.exe는 무엇입니까? 이것이 Chrome 프로세스인가요? Windows 11/10의 Updater.exe는 무엇입니까? 이것이 Chrome 프로세스인가요? Mar 21, 2024 pm 05:36 PM

Windows에서 실행하는 모든 응용 프로그램에는 업데이트를 위한 구성 요소 프로그램이 있습니다. 따라서 Google Chrome 또는 Google Earth를 사용하는 경우 GoogleUpdate.exe 애플리케이션을 실행하고 업데이트가 가능한지 확인한 다음 설정에 따라 업데이트합니다. 그러나 더 이상 표시되지 않고 대신 Windows 11/10의 작업 관리자에 프로세스 updater.exe가 표시되는 경우에는 이유가 있습니다. Windows 11/10의 Updater.exe는 무엇입니까? Google은 Google Earth, Google Drive, Chrome 등과 같은 모든 앱에 대한 업데이트를 출시했습니다. 이 업데이트는

Black Shark 휴대폰이 켜지지 않는 문제를 해결하는 방법을 알려주는 5가지 팁! Black Shark 휴대폰이 켜지지 않는 문제를 해결하는 방법을 알려주는 5가지 팁! Mar 24, 2024 pm 12:27 PM

스마트폰 기술이 계속해서 발전하면서 휴대폰은 우리 일상생활에서 점점 더 중요한 역할을 하고 있습니다. Black Shark 휴대폰은 게이밍 성능에 중점을 둔 플래그십 휴대폰으로 플레이어들에게 큰 호응을 얻고 있습니다. 그러나 때로는 Black Shark 휴대폰을 켤 수 없는 상황에 직면하기도 합니다. 이때 이 문제를 해결하기 위해 몇 가지 조치를 취해야 합니다. 다음으로 Black Shark 휴대폰이 켜지지 않는 문제를 해결하는 방법을 알려주는 5가지 팁을 공유하겠습니다. 1단계: 배터리 전원을 확인하세요. 먼저 Black Shark 휴대폰의 전원이 충분한지 확인하세요. 휴대폰 배터리가 방전되었기 때문일 수 있습니다.

이 장치에 드라이버를 로드할 수 없습니다. 어떻게 해결합니까? (개인적으로 테스트되었으며 유효함) 이 장치에 드라이버를 로드할 수 없습니다. 어떻게 해결합니까? (개인적으로 테스트되었으며 유효함) Mar 14, 2024 pm 09:00 PM

컴퓨터가 드라이버를 로드할 수 없으면 장치가 제대로 작동하지 않거나 컴퓨터와 제대로 상호 작용하지 않을 수 있다는 것은 누구나 알고 있습니다. 그렇다면 이 장치에 드라이버를 로드할 수 없다는 메시지 상자가 컴퓨터에 나타날 때 문제를 어떻게 해결합니까? 아래 편집기에서는 문제를 쉽게 해결하는 두 가지 방법을 알려드립니다. 이 장치에 드라이버를 로드할 수 없습니다. 해결 방법 1. 시작 메뉴에서 "커널 격리"를 검색합니다. 2. 메모리 무결성을 끄십시오. 위의 메시지는 "메모리 무결성이 꺼졌습니다. 장치가 취약할 수 있습니다."를 클릭하고 무시하면 사용에 영향을 미치지 않습니다. 3. 문제는 기기를 다시 시작한 후 해결될 수 있습니다.

Xiaohongshu에 게시할 때 사진이 자동으로 저장되는 문제를 해결하는 방법은 무엇입니까? 포스팅 시 자동으로 저장되는 이미지는 어디에 있나요? Xiaohongshu에 게시할 때 사진이 자동으로 저장되는 문제를 해결하는 방법은 무엇입니까? 포스팅 시 자동으로 저장되는 이미지는 어디에 있나요? Mar 22, 2024 am 08:06 AM

소셜 미디어의 지속적인 발전으로 Xiaohongshu는 점점 더 많은 젊은이들이 자신의 삶을 공유하고 아름다운 것을 발견할 수 있는 플랫폼이 되었습니다. 많은 사용자들이 이미지 게시 시 자동 저장 문제로 고민하고 있습니다. 그렇다면 이 문제를 해결하는 방법은 무엇입니까? 1. Xiaohongshu에 게시할 때 사진이 자동으로 저장되는 문제를 해결하는 방법은 무엇입니까? 1. 캐시 지우기 먼저 Xiaohongshu의 캐시 데이터를 지워볼 수 있습니다. 단계는 다음과 같습니다. (1) Xiaohongshu를 열고 오른쪽 하단에 있는 "내" 버튼을 클릭합니다. (2) 개인 센터 페이지에서 "설정"을 찾아 클릭합니다. 캐시 지우기' 옵션을 선택하고 확인을 클릭하세요. 캐시를 삭제한 후 샤오홍슈에 다시 진입하여 사진을 올려 자동 저장 문제가 해결되었는지 확인해 보세요. 2. Xiaohongshu 버전을 업데이트하여 Xiaohongshu를 확인하세요.

Chrome 플러그인 확장 프로그램 설치 디렉터리는 무엇인가요? Chrome 플러그인 확장 프로그램 설치 디렉터리는 무엇인가요? Mar 08, 2024 am 08:55 AM

Chrome 플러그인 확장 프로그램 설치 디렉터리는 무엇인가요? 일반적인 상황에서 Chrome 플러그인 확장의 기본 설치 디렉터리는 다음과 같습니다. 1. windowsxp에서 Chrome 플러그인의 기본 설치 디렉터리 위치: C:\DocumentsandSettings\username\LocalSettings\ApplicationData\Google\Chrome\UserData\ Windows7의 Default\Extensions2.chrome 플러그인의 기본 설치 디렉터리 위치: C:\Users\username\AppData\Local\Google\Chrome\User

한 기사로 WordPress 설치 문제 해결 가이드 한 기사로 WordPress 설치 문제 해결 가이드 Feb 29, 2024 am 11:06 AM

WordPress는 매우 인기 있는 오픈 소스 콘텐츠 관리 시스템입니다. 많은 개인 사용자와 기업이 WordPress를 사용하여 자신의 웹사이트를 구축하고 관리합니다. 그러나 WordPress를 설치하는 동안 데이터베이스 연결 오류, 파일 권한 문제 등과 같은 몇 가지 문제가 발생할 수 있습니다. 이 문서에서는 일반적인 WordPress 설치 문제를 해결하는 방법에 대한 가이드를 제공하고 특정 코드 예제를 통해 사용자가 문제를 빠르게 해결할 수 있도록 도와줍니다. 문제 1: WordPress 설치 시 데이터베이스 연결 오류

WordPress 백엔드 잘못된 코드가 걱정되나요? 다음 솔루션을 사용해 보세요 WordPress 백엔드 잘못된 코드가 걱정되나요? 다음 솔루션을 사용해 보세요 Mar 05, 2024 pm 09:27 PM

WordPress 백엔드 잘못된 코드가 걱정되나요? 이러한 솔루션을 사용해 보십시오. 웹 사이트 구축에 WordPress가 널리 적용되면서 많은 사용자가 WordPress 백엔드에서 잘못된 코드 문제에 직면할 수 있습니다. 이러한 종류의 문제로 인해 배경 관리 인터페이스에 잘못된 문자가 표시되어 사용자에게 큰 문제를 야기합니다. 이 문서에서는 사용자가 WordPress 백엔드에서 잘못된 문자 문제를 해결하는 데 도움이 되는 몇 가지 일반적인 솔루션을 소개합니다. wp-config.php 파일을 수정하고 wp-config를 엽니다.

See all articles