집 >웹 프론트엔드 >JS 튜토리얼 >js 마우스 클릭으로 인해 이동 이벤트가 발생하는 솔루션 알아보기

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

php是最好的语言원래의: 2018-07-24 15:33:443295검색

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

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>

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

Mouse events

1. 이벤트 발생 순서

2. mouseenter와 mouseover의 차이점

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

관련 기사