JS 튜토리얼

js 마우스 클릭으로 인해 이동 이벤트가 발생하는 솔루션 알아보기

php是最好的语言

Jul 24, 2018 pm 03:33 PM

마우스 버튼(왼쪽 또는 오른쪽 버튼)을 누르면 마우스 이벤트가 트리거됩니다. 키보드를 통해 트리거할 수 없습니다. 마우스 이벤트가 트리거되는 순서는 무엇입니까? 자세한 예는 아래에 나와 있습니다.

Mouse events

9개의 마우스 이벤트는 DOM 레벨 3 이벤트에 정의되어 있습니다.

mousedown: 마우스 버튼을 눌렀을 때(왼쪽 또는 오른쪽 버튼) 트리거됩니다. 키보드를 통해 트리거할 수 없습니다.
mouseup: 마우스 버튼을 놓고 팝업될 때 트리거됩니다. 키보드를 통해 트리거할 수 없습니다.
클릭: 마우스 왼쪽 버튼을 클릭하거나 Enter 키를 누를 때 트리거됩니다. 이는 접근성을 보장하는 데 중요합니다. 즉, onclick 이벤트 핸들러는 키보드와 마우스 모두에서 실행될 수 있습니다.
dblclick: 마우스 왼쪽 버튼을 두 번 클릭하면 트리거됩니다.
mouseover: 마우스를 대상 요소 위로 이동합니다. 마우스가 하위 요소 위로 이동할 때 발생합니다.
mouseout: 마우스가 대상 요소 밖으로 이동합니다.
mouseenter: 마우스가 요소 범위로 이동할 때 트리거됩니다. 이 이벤트는 버블링되지 않습니다. 즉, 마우스가 하위 요소 위로 이동할 때 트리거되지 않습니다.
mouseleave: 마우스가 요소 범위 밖으로 이동할 때 트리거됩니다. 이 이벤트는 버블링되지 않습니다. 즉, 마우스가 하위 요소로 이동할 때 트리거되지 않습니다.
mousemove: 마우스가 요소 내부에서 움직일 때 지속적으로 트리거됩니다. 키보드를 통해 트리거할 수 없습니다.

note:

click 이벤트는 요소에서 mousedown 및 mouseup 이벤트가 연속적으로 트리거되는 경우에만 트리거됩니다. dblclick 이벤트는 두 개의 클릭 이벤트가 차례로 트리거될 때만 트리거됩니다.

mousedown이나 mouseup이 취소되면 클릭 이벤트가 발생하지 않습니다. 클릭 이벤트가 직접 또는 간접적으로 취소되면 dblclick 이벤트가 발생하지 않습니다.

1. 이벤트 발생 순서

예: 위에서 버튼을 두 번 클릭하면 발생하는 이벤트를 살펴보세요.

<input id="btn" type="button" value="click"/><script>
    var btn = document.getElementById("btn");
    btn.addEventListener("mousedown",function(event){
        console.log("mousedown");
    },false);
    btn.addEventListener("mouseup",function(){
        console.log("mouseup");
    },false);
    btn.addEventListener("click", function () {
        console.log("click");
    },false);
    btn.addEventListener("dblclick", function () {
        console.log("dblclick");
    },false);</script>

코드 보기

2. mouseenter와 mouseover의 차이점

차이점:

mouseover 이벤트는 버블링됩니다. 즉, 마우스가 하위 요소 위로 이동할 때 트리거됩니다.

mouseenter 이벤트는 버블링되지 않습니다. 즉, 마우스가 하위 요소 위로 이동할 때 발생하지 않습니다.

예:

<!DOCTYPE html><html><head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        #outer{            position: absolute;            width: 200px;            height: 200px;            top:0;            left: 0;            bottom:0;            right: 0;            margin: auto;            background-color: pink;        }
        #inner{            position: absolute;            width: 100px;            height:100px;            top:50%;            left:50%;            margin-left: -50px;            margin-top: -50px;;
            background-color: orange;            text-align: center;            line-height: 100px;        }
        #outer,#inner{            border-radius:50%;        }
    </style>
    <script src="jquery-2.1.1.min.js"></script></head><body><body>
    <p id="outer">
            <p id="inner">
            </p>
    </p></body><script>
    var parentp = document.getElementById("outer");
    parentp.addEventListener("mouseover", function () {
         console.log("父p的mouseover事件被触发");
    },false);    //parentp.addEventListener("mouseenter", function () {
    //    console.log("父p的mouseenter事件被触发");
    //},false);
    //parentp.addEventListener("mouseout", function () {
    //    console.log("父p的mouseout事件被触发");
    //},false);
    //parentp.addEventListener("mouseleave", function () {
    //    console.log("父p的mouseleave事件被触发");
    //},false);</script></body></html>

코드 보기

note:

mouseover는 mouseout에 해당하고, mouseenter는 mouseleave에 해당합니다. 위 코드의 주석 처리를 제거하면 효과를 확인할 수 있습니다.

jquery의 hover API는 mouseenter와 mouseleave의 조합입니다.

3. 왼쪽 및 오른쪽 마우스 버튼

<script type="text/javascript">document.onmousedown=function (ev){
    var oEvent = ev||event; //IE浏览器直接使用event或者window.event得到事件本身。
    alert(oEvent.button);// IE下鼠标的 左键是1 ，  右键是2   ff和chrome下 鼠标左键是0  右键是2};</script>

관련 기사

Java vs JavaScript : 개발자를위한 세부 비교May 16, 2025 am 12:01 AM

javaandjavaScriptAredistIntLanguages : javaisusedforenterpriseandmobileApps, whilejavaScriptisforInciveWebPages.1) javaiscompiled, 정적으로 정적, Andrunsonjvm.2) javaScriptISNaterPreted, doineslicallytyted, andrunsinbrowsorsornode.js.3) javausepith

JavaScript 데이터 유형 : 브라우저와 Nodejs 사이에 차이가 있습니까?May 14, 2025 am 12:15 AM

JavaScript 코어 데이터 유형은 브라우저 및 Node.js에서 일관되지만 추가 유형과 다르게 처리됩니다. 1) 글로벌 객체는 브라우저의 창이고 node.js의 글로벌입니다. 2) 이진 데이터를 처리하는 데 사용되는 Node.js의 고유 버퍼 객체. 3) 성능 및 시간 처리에는 차이가 있으며 환경에 따라 코드를 조정해야합니다.

JavaScript 댓글 : / / * * /사용 안내서May 13, 2025 pm 03:49 PM

javaScriptUSTWOTYPESOFSOFCOMMENTS : 단일 라인 (//) 및 multi-line (//)

Python vs. JavaScript : 개발자를위한 비교 분석May 09, 2025 am 12:22 AM

Python과 JavaScript의 주요 차이점은 유형 시스템 및 응용 프로그램 시나리오입니다. 1. Python은 과학 컴퓨팅 및 데이터 분석에 적합한 동적 유형을 사용합니다. 2. JavaScript는 약한 유형을 채택하며 프론트 엔드 및 풀 스택 개발에 널리 사용됩니다. 두 사람은 비동기 프로그래밍 및 성능 최적화에서 고유 한 장점을 가지고 있으며 선택할 때 프로젝트 요구 사항에 따라 결정해야합니다.

Python vs. JavaScript : 작업에 적합한 도구 선택May 08, 2025 am 12:10 AM

Python 또는 JavaScript를 선택할지 여부는 프로젝트 유형에 따라 다릅니다. 1) 데이터 과학 및 자동화 작업을 위해 Python을 선택하십시오. 2) 프론트 엔드 및 풀 스택 개발을 위해 JavaScript를 선택하십시오. Python은 데이터 처리 및 자동화 분야에서 강력한 라이브러리에 선호되는 반면 JavaScript는 웹 상호 작용 및 전체 스택 개발의 장점에 없어서는 안될 필수입니다.

파이썬 및 자바 스크립트 : 각각의 강점을 이해합니다May 06, 2025 am 12:15 AM

파이썬과 자바 스크립트는 각각 고유 한 장점이 있으며 선택은 프로젝트 요구와 개인 선호도에 따라 다릅니다. 1. Python은 간결한 구문으로 데이터 과학 및 백엔드 개발에 적합하지만 실행 속도가 느립니다. 2. JavaScript는 프론트 엔드 개발의 모든 곳에 있으며 강력한 비동기 프로그래밍 기능을 가지고 있습니다. node.js는 풀 스택 개발에 적합하지만 구문은 복잡하고 오류가 발생할 수 있습니다.

JavaScript의 핵심 : C 또는 C에 구축 되었습니까?May 05, 2025 am 12:07 AM

javaScriptisNotBuiltoncorc; it'SangretedLanguageThatrunsonOngineStenWrittenInc .1) javaScriptWasDesignEdasAlightweight, 해석 hanguageforwebbrowsers.2) Endinesevolvedfromsimpleplemporectreterstoccilpilers, 전기적으로 개선된다.

JavaScript 응용 프로그램 : 프론트 엔드에서 백엔드까지May 04, 2025 am 12:12 AM

JavaScript는 프론트 엔드 및 백엔드 개발에 사용할 수 있습니다. 프론트 엔드는 DOM 작업을 통해 사용자 경험을 향상시키고 백엔드는 Node.js를 통해 서버 작업을 처리합니다. 1. 프론트 엔드 예 : 웹 페이지 텍스트의 내용을 변경하십시오. 2. 백엔드 예제 : node.js 서버를 만듭니다.

See all articles