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

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

요소 위로 마우스를 가져갈 때 절대 위치 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() } );

답변

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

<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(); } );

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

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

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