하위 요소로 인해 트리거된 마우스 아웃 이벤트를 비활성화하는 방법은 무엇입니까?

하위 요소로 인해 트리거된 마우스 아웃 이벤트를 비활성화하는 방법은 무엇입니까?

이 문제에 대해 자세히 설명하겠습니다.

요소 위를 맴돌 때 절대 위치 디브를 보여주고 싶습니다.jQuery는 정말 간단하며 잘 작동합니다.그러나 마우스가 하위 요소 중 하나를 넘기면 포함된 div의 마우스 아웃 이벤트가 트리거됩니다.하위 요소를 호버링할 때 javascript가 포함 요소의 마우스 아웃 이벤트를 트리거하지 않도록 하려면 어떻게 해야 합니까?

jQuery를 사용하는 가장 좋고 짧은 방법은 무엇입니까?

다음은 제가 의미하는 바를 설명하기 위한 간단한 예입니다.

html:

<a>Hover Me</a>
<div>
  <input>Test</input>
  <select>
    <option>Option 1</option>
    <option>Option 2</option>
  </select>
</div>

자바스크립트/jQuery:

$('a').hover( function() { $(this).next().show() }
              function() { $(this).next().hide() } );

그 질문은 좀 오래된 질문인데, 며칠 전에 우연히 이 문제를 발견했습니다.

최근 버전의 jQuery를 사용하는 가장 간단한 방법은mouseenter그리고.mouseleave아닌 사건들mouseover그리고.mouseout.

다음을 통해 동작을 빠르게 테스트할 수 있습니다.

$(".myClass").on( {
   'mouseenter':function() { console.log("enter"); },
   'mouseleave':function() { console.log("leave"); }
});

단순화를 위해 html을 조금 재구성하여 새로 표시된 내용을 마우스오버 이벤트에 바인딩된 요소 안에 넣겠습니다.

<div id="hoverable">
  <a>Hover Me</a>
  <div style="display:none;">
    <input>Test</input>
    <select>
      <option>Option 1</option>
      <option>Option 2</option>
    </select>
  </div>
</div>

그러면 다음과 같은 작업을 수행할 수 있습니다.

$('#hoverable').hover( function() { $(this).find("div").show(); },
                       function() { $(this).find("div").hide(); } );

---

참고: 인라인 CSS는 추천하지 않지만 예제를 더 쉽게 소화할 수 있도록 했습니다.

, 아 써, ..mouseleave대신에.mouseout:

$('div.sort-selector').mouseleave(function() {
    $(this).hide();
});

혹은 그것을 조합하여 사용하기도 합니다.live:

$('div.sort-selector').live('mouseleave', function() {
    $(this).hide();
});

jQuery는 javascript의 이벤트 버블링 방지에 해당하는 jQuery를 찾고 있습니다.

이 내용을 확인해 보십시오.

http://docs.jquery.com/Events/jQuery.Event#event.stopPropagation.28.29

기본적으로 자식 DOM 노드에서 이벤트를 포착해야 합니다. 그러면 DOM 트리에 대한 전파가 중지됩니다.페이지의 기존 이벤트를 심각하게 방해할 수 있으므로 실제로 제안되지는 않았지만 이벤트 캡처를 페이지의 특정 요소로 설정하면 모든 이벤트를 수신할 수 있습니다.이것은 DnD 동작 등에 유용하지만, 당신의 경우에는 결코 유용하지 않습니다.

마우스 좌표가 마우스 아웃 이벤트의 요소 밖에 있는지 확인하는 것뿐입니다.

효과는 있지만 그런 간단한 것에는 많은 코드입니다 :(

function mouseOut(e)
{
    var pos = GetMousePositionInElement(e, element);
    if (pos.x < 0 || pos.x >= element.size.X || pos.y < 0 || pos.y >= element.size.Y)
    {
        RealMouseOut();
    }
    else
    {
         //Hit a child-element
    }
}

가독성을 위해 코드가 잘려 있어요, 틀에서 벗어나진 않을 겁니다.

나는 이 문제를 다음과 같이 해결했습니다.pointer-events: none;내 자식 요소 CSS에 대해

라이언의 의견에 동의합니다.

당신의 문제는 "다음" 디바가 A의 "아이"가 아니라는 것입니다.HTML이나 jQuery에서 사용자의 "a" 요소가 DOM의 자식 디브와 관련되어 있다는 것을 알 수 있는 방법은 없습니다.포장지를 감싸고 포장지 위에 맴도는 것은 그들이 연관되어 있다는 것을 의미합니다.

하지만 그의 코드가 모범 사례와 일치하지는 않습니다.요소에 숨김 스타일을 인라인으로 설정하지 마십시오. 사용자에게 CSS가 있지만 자바스크립트가 없으면 요소가 숨어서 표시되지 않습니다.문서 준비 이벤트에 해당 선언을 입력하는 것이 더 좋습니다.

보통 제가 본 방법은 HoverMe 요소에서 마우스를 이동할 때까지 약 1/2초의 지연이 발생하는 것입니다.마우스를 호버링 요소로 이동할 때 요소 위를 호버링하는 신호를 보내는 변수를 설정한 다음 이 변수가 설정되면 기본적으로 호버링 부분이 숨지 않도록 중지할 수 있습니다.그런 다음 마우스를 제거할 때 사라지도록 하려면 호버링된 요소에서 유사한 숨김 기능 OnMouseOut을 추가해야 합니다.코드나 좀 더 구체적인 것을 알려드릴 수 없어서 죄송합니다만, 이것이 올바른 방향을 가리키기를 바랍니다.

이것은 오래된 질문이지만 결코 쓸모가 없어지지 않습니다.정답은 바이트 브라이트로 제시된 정답이어야 합니다.

마우스 오버/마우스 아웃과 마우스 엔터/마우스 레프트의 차이만 지적하고자 합니다.여기에서 유용하고 훌륭한 설명을 읽을 수 있습니다(작업 데모를 보려면 페이지 맨 아래로 이동).사용할때mouseout, 이벤트는 하위 요소인 경우에도 마우스가 다른 요소로 들어갈 때 중지됩니다.반대로, 당신이 사용할 때mouseleave, 마우스가 하위 요소를 덮어쓸 때 이벤트가 트리거되지 않으며, 이는 OP가 달성하고자 하는 동작입니다.

언급URL : https://stackoverflow.com/questions/350639/how-to-disable-mouseout-events-triggered-by-child-elements