복붙노트

[JQUERY] 마우스 오버 대 JQuery와 mouseenter () ()

JQUERY

마우스 오버 대 JQuery와 mouseenter () ()

해결법

  1. 1.당신은 당신의 목표 요소는 자식 요소를 포함하는 동작을 참조하십시오

    당신은 당신의 목표 요소는 자식 요소를 포함하는 동작을 참조하십시오

    http://jsfiddle.net/ZCWvJ/7/

    때마다 마우스가 트리거,하지만 mouseenter되는 마우스 오버 자식 요소를 입력하거나 잎.

    $ ( '#의 my_div'). 바인드 ( "마우스 오버 mouseenter", 기능 (전자) { VAR 엘 = $ ( "#"+ e.type); VAR N = + el.text (); el.text (N ++); }); #my_div { 패딩 : 0 20 픽셀 20 픽셀 0; 배경 색상 : #eee; 마진 - 하단 : 10px; 폭 : 90 픽셀; 오버 플로우 : 숨겨진; } #my_div> DIV { 왼쪽으로 뜨다; 여백 : 20 픽셀 0 0 20 픽셀; 높이 : 25 픽셀; 폭 : 25 픽셀; 배경 색상 : #aaa; } <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">

    MouseEnter <스팬 ID = "mouseenter"> 0
    에 MouseOver <스팬 ID = "마우스 오버"> 0

  2. 2.이것은 필자가 발견 한 최고의 사례 중 하나입니다 :

    이것은 필자가 발견 한 최고의 사례 중 하나입니다 :

    http://bl.ocks.org/mbostock/5247027

  3. 3.그들은 같은 방식으로 작동하지만 마우스 포인터가 선택한 요소를 입력 할 때, 그러나, mouseenter 이벤트는 트리거합니다. 마우스 포인터뿐만 아니라 모든 자식 요소를 입력하면 마우스 오버 이벤트가 트리거됩니다.

    그들은 같은 방식으로 작동하지만 마우스 포인터가 선택한 요소를 입력 할 때, 그러나, mouseenter 이벤트는 트리거합니다. 마우스 포인터뿐만 아니라 모든 자식 요소를 입력하면 마우스 오버 이벤트가 트리거됩니다.

  4. 4.예제 코드를 참조 JQuery와 문서 페이지의 하단에 데모 :

    예제 코드를 참조 JQuery와 문서 페이지의 하단에 데모 :

    http://api.jquery.com/mouseenter/

  5. 5.이 이벤트 버블 링을 처리하는 방식에 마우스 오버에서 mouseenter 이벤트 다릅니다. 마우스가 아닌 후손에 바인딩 요소를 입력 할 때 mouseenter 이벤트 만의 핸들러를 트리거합니다. 참조 : https://api.jquery.com/mouseenter/

    이 이벤트 버블 링을 처리하는 방식에 마우스 오버에서 mouseenter 이벤트 다릅니다. 마우스가 아닌 후손에 바인딩 요소를 입력 할 때 mouseenter 이벤트 만의 핸들러를 트리거합니다. 참조 : https://api.jquery.com/mouseenter/

    이 이벤트 버블 링을 처리하는 방식에로 마우스에서 MouseLeave 이벤트를 다릅니다. 마우스가 아닌 후손에 바인딩 요소를 떠날 때 MouseLeave 이벤트 만의 핸들러를 트리거합니다. 참조 : https://api.jquery.com/mouseleave/

  6. 6.이 예에서 mousemove, mouseenter 및 마우스 오버 이벤트의 차이를 보여줍니다

    이 예에서 mousemove, mouseenter 및 마우스 오버 이벤트의 차이를 보여줍니다

    https://jsfiddle.net/z8g613yd/

    HTML :

    <div onmousemove="myMoveFunction()">
    <p>onmousemove: <br> <span id="demo">Mouse over me!</span></p>
</div>

<div onmouseenter="myEnterFunction()">
    <p>onmouseenter: <br> <span id="demo2">Mouse over me!</span></p>
</div>

<div onmouseover="myOverFunction()">
    <p>onmouseover: <br> <span id="demo3">Mouse over me!</span></p>
</div>

    CSS :

    div {
    width: 200px;
    height: 100px;
    border: 1px solid black;
    margin: 10px;
    float: left;
    padding: 30px;
    text-align: center;
    background-color: lightgray;
}

p {
    background-color: white;
    height: 50px;
}

p span {
    background-color: #86fcd4;
    padding: 0 20px;
}

    JS :

    var x = 0;
var y = 0;
var z = 0;

function myMoveFunction() {
    document.getElementById("demo").innerHTML = z += 1;
}

function myEnterFunction() {
    document.getElementById("demo2").innerHTML = x += 1;
}

function myOverFunction() {
    document.getElementById("demo3").innerHTML = y += 1;
}

  7. 7.오래된 질문,하지만 여전히 IMO 통찰력 더 좋은 최신의 대답.

    오래된 질문,하지만 여전히 IMO 통찰력 더 좋은 최신의 대답.

    요즘은 모든 브라우저가 마우스 오버 /로 마우스 및 mouseenter /하는 MouseLeave 지원합니다. 그럼에도 불구하고, jQuery를가 mouseenter /하는 MouseLeave로 핸들러를 등록하지 않지만, 자동으로 다음 코드에서 볼 수 있듯이 마우스 오버 /로 마우스를 주위에 래퍼에 박았을하고 mouseenter /하는 MouseLeave의 자신의 약간 다른 해석을한다.

    이벤트의 정확한 동작은 "위임 핸들러"에 특히 관련이있다. 불행히도, jQuery를 또한 자신의 다른 대표 핸들러가 무엇의 해석과 그들이 이벤트를 받아야 있습니다. 그 사실은 간단한 클릭 이벤트에 대한 다른 답변에 표시됩니다.

    어떻게 제대로 이벤트 핸들러 자바 스크립트 표현을 사용하지만 모두 다른을하고 심지어는 문서에 그것을 언급하지 않는 jQuery를에 대한 질문, 답변을?

    "진짜"자바 스크립트의 첫 번째 차이점 :

    일부 테스트 후, 오랫동안 당신이 "선택 등록을 위임 핸들러를"jQuery를 사용하지 않는 것이 그 쇼, 에뮬레이션이 필요하지만 합리적이다 : 그것은 mouseenter /하는 MouseLeave 얻을하지 않을 것이라고 마우스 오버 /로 마우스 이벤트를 필터링합니다. 목표는하지만, 엉망이된다. 실제 mouseenter /하는 MouseLeave 에뮬레이션는 마우스 오버가 / 실시로 마우스를 어떤 그 요소, 즉의 아이들을 나타낼 수, 대상으로 핸들러 요소를 줄 것이다.

    CONST 목록 = document.getElementById를 ( "로그인"); CONST 외측 = document.getElementById를 ( '외부'); $ 아우터에서 const = $ (외측); 로그 함수 (태그, 이벤트) { CONST 리 = list.insertBefore (document.createElement ( '리') list.firstChild); //에만 jQuery를 핸들러 originalEvent이 CONST 전자 = event.originalEvent || 행사; li.append (`$ {태그} $ {e.target.id}`에 $ {e.type}을 가지고); } outer.addEventListener ( 'mouseenter'log.bind (NULL 'JSmouseenter')); ( 'mouseenter', log.bind (NULL, '$ mouseenter를')) outer.on $; DIV { 여백 : 20 픽셀; 국경 : 검은 색 2 픽셀을; } #inner { 최소 높이 : 80 픽셀; } <스크립트 SRC = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">

    'JQUERY' 카테고리의 다른 글

    [JQUERY] 상위 이벤트 핸들러의 방지 실행  (0) 2020.10.01
    [JQUERY] jQuery를에서 CSS 규칙의 백분율 값을 얻을  (0) 2020.10.01
    [JQUERY] 두 기능 사이에 jQuery를이 클릭 / 전환  (0) 2020.10.01
    [JQUERY] iframe이 SRC 변경 이벤트 감지?  (0) 2020.10.01
    [JQUERY] 그것은 "스타일 변화"이벤트를 수신 할 수 있습니까?  (0) 2020.10.01
,

티스토리툴바