자식 요소에 의해 트리거되는 마우스 아웃 이벤트를 비활성화하는 방법은 무엇입니까?

문제를 자세히 설명하겠습니다.

요소 위로 마우스를 가져갈 때 절대 위치 div를 표시하고 싶습니다. jQuery를 사용하면 정말 간단하고 잘 작동합니다. 그러나 마우스가 자식 요소 중 하나 위로 이동하면 포함 된 div의 mouseout 이벤트가 트리거됩니다. 자식 요소를 가리킬 때 JavaScript가 포함 요소의 mouseout 이벤트를 트리거하지 않도록하려면 어떻게해야합니까?

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을 약간 재구성하여 mouseover 이벤트가 바인딩 된 요소 내부에 새로 표시된 콘텐츠를 넣습니다.

<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를 찾고 있습니다.

이것 좀 봐:

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

기본적으로 자식 DOM 노드에서 이벤트를 잡아야하며 DOM 트리로의 전파를 중지해야합니다. 실제로 제안되지는 않았지만 (페이지의 기존 이벤트를 심각하게 엉망으로 만들 수 있으므로) 또 다른 방법은 이벤트 캡처를 페이지의 특정 요소로 설정하고 모든 이벤트를 수신하는 것입니다. 이것은 DnD 동작 등에 유용하지만 확실히 귀하의 경우에는 아닙니다.

나는 단순히 마우스 좌표가 mouseout-event의 요소 밖에 있는지 확인하고 있습니다.

작동하지만 간단한 일에 대한 많은 코드입니다.

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
    }
}

가독성을 위해 잘라낸 코드는 기본적으로 작동하지 않습니다.

나는 Ryan과 동의합니다.

문제는 "다음"div가 A의 "자식"이 아니라는 것입니다. HTML 또는 jQuery가 "a"요소가 DOM의 하위 div와 관련되어 있음을 알 수있는 방법이 없습니다. 래핑하고 래퍼에 마우스를 올려 놓으면 연결되어 있음을 의미합니다.

하지만 그의 코드는 모범 사례와 일치하지 않습니다. 요소에 숨겨진 스타일을 인라인으로 설정하지 마십시오. 사용자에게 CSS가 있지만 자바 스크립트가없는 경우 요소가 숨겨지고 표시되지 않습니다. 더 나은 방법은 해당 선언을 document.ready 이벤트에 넣는 것입니다.

pointer-events: none;내 자식 요소 css를 추가하여이 문제를 해결했습니다.

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

오래된 질문이지만 결코 쓸모가 없습니다. 정답은 bytebrite가 제공 한 것이 어야 합니다.

mouseover / mouseout과 mouseenter / mouseleave의 차이점 만 지적하고 싶습니다. 여기 에서 훌륭하고 유용한 설명을 읽을 수 있습니다 (작동하는 데모는 페이지 맨 아래로 이동). 를 사용 mouseout하면 자식 요소라도 마우스가 다른 요소에 들어가면 이벤트가 중지됩니다. 반면에를 사용 mouseleave하면 마우스가 자식 요소 위에있을 때 이벤트가 트리거되지 않으며 이것이 OP가 달성하려는 동작입니다.