JavaScript에서 프로그래밍 방식으로 onmouseover 이벤트를 트리거합니다.

StackOverflow https://stackoverflow.com/questions/2228376

문제

프로그래밍 방식으로 트리거하는 방법이 있습니까? onmouseover 일반 JavaScript의 이벤트?또는 메소드를 "추출"합니다. onmouseover 직접 호출하는 이벤트?

예를 들어

<div id="bottom-div" onmouseover="myFunction('some param specific to bottom-div');">
    <div id="top-div" onmouseover="????????"></div>
</div>

top-div는 Bottom-div 위에 있으므로 onmouseover 하단 div에서는 해고되지 않습니다.전화할 방법이 필요해 myFunction('some param specific to bottom-div'); 최상위 div에서

도움이 되었습니까?

해결책

당신은 다음과 같이 할 것입니다.

document.getElementById('top-div').onmouseover();

그러나 의견에서 언급했듯이 문제로 간주되기 전에 테스트 할 가치가 있습니다.

다른 팁

이것은 적어도 IE9에서 나를 위해 효과가있었습니다. 크로스 브라우저와 호환되거나 가까이 있어야합니다 ...

function FireEvent( ElementId, EventName )
{
    if( document.getElementById(ElementId) != null )    
    {   
        if( document.getElementById( ElementId ).fireEvent ) 
        {
            document.getElementById( ElementId ).fireEvent( 'on' + EventName );     
        }
        else 
        {   
            var evObj = document.createEvent( 'Events' );
            evObj.initEvent( EventName, true, false );
            document.getElementById( ElementId ).dispatchEvent( evObj );
        }
    }
}

OnMouseOver 예제의 경우 이와 같은 기능을 호출하십시오

FireEvent( ElementId, "mouseover" );

const mouseoverEvent = new Event('mouseover');

whateverElement.dispatchEvent(mouseoverEvent);

너무 많은 세부 사항을 사용하지 않고, 롤오버가있는 IMG, 즉 IMG SRC를 숨겨진 양식 값으로 설정하는 마우스 아웃/오버를 가졌습니다 (또는 이는 Gloabl 변수와 다른 컨텍스트에서 수행 될 수 있음). 나는 일부 JavaScript를 사용하여 내 오버/아웃 이미지 값을 모두 교환했으며 (elementid, "mouseover")라고 불렀습니다. 변화를 유발합니다. 내 JavaScript는 페이지에 요소를 숨기거나 표시했습니다. 이로 인해 커서가 때때로 내가 이벤트를 트리거하는 데 사용한 IMG를 넘어 설로 만들었습니다. 이는 내가 교환 한 것과 동일했으며 때로는 커서가 클릭 후 IMG를 넘지 않았습니다.

마우스 오버/아웃은 요소를 종료하고 다시 입력하지 않으면 발사되지 않으므로 내 이벤트가 새로운 커서 위치를 설명하기 위해 마우스 오버/아웃 "재전거"가 트리거 된 후 트리거되었습니다. 여기 내 해결책이 있습니다. 다양한 페이지 요소를 숨기거나 표시하고 설명대로 IMG SRC 스왑을 수행 한 후 Fireeevent (emectID, "MouseOver") 대신 기능을 CroseshMouseevents (ElementID)를 호출합니다.

이것은 IE9에서 작동합니다 (다른 브라우저에 대해서는 잘 모르겠습니다).

function RefreshMouseEvents( ElementId )
{
    FireEvent( ElementId, 'mouseover' );
    setTimeout( "TriggerMouseEvent( '" + ElementId + "' )" , 1 );
}

function TriggerMouseEvent( ElementId )
{
    if( IsMouseOver( ElementId, event.clientX, event.clientY ) )
        FireEvent( ElementId, 'mouseover' );
    else    
        FireEvent( ElementId, 'mouseout' );
}

function IsMouseOver( ElementId, MouseXPos, MouseYPos )
{
    if( document.getElementById(ElementId) != null )    
    {
        var Element = document.getElementById(ElementId);   
        var Left  = Element.getBoundingClientRect().left, 
            Top   = Element.getBoundingClientRect().top,
            Right = Element.getBoundingClientRect().right,
            Bottom  = Element.getBoundingClientRect().bottom;       
        return ( (MouseXPos >= Left) && (MouseXPos <= Right) && (MouseYPos >= Top) && (MouseYPos <= Bottom))    
    }
    else
        return false;
}

function FireEvent( ElementId, EventName )
{
    if( document.getElementById(ElementId) != null )    
    {   
        if( document.getElementById( ElementId ).fireEvent ) 
        {
            document.getElementById( ElementId ).fireEvent( 'on' + EventName );     
        }
        else 
        {   
            var evObj = document.createEvent( 'Events' );
            evObj.initEvent( EventName, true, false );
            document.getElementById( ElementId ).dispatchEvent( evObj );
        }
    }
}

더 많은 테스트 후에도 CompertMouseevents 세트를 수정해야했습니다. 다음은 겉보기에 완전한 버전입니다 (다시 IE9 만 테스트).

function RefreshMouseEvents( ElementId ) 
{
    FireEvent( ElementId, 'mouseover' );
    setTimeout( "TriggerMouseEvent( '" + ElementId + "', '" + event.clientX + "', '" + event.clientY + "' )", 1 );
}

function TriggerMouseEvent( ElementId, MouseXPos, MouseYPos )
{
    if( IsMouseOver( ElementId, (1*MouseXPos), (1*MouseYPos) ) )
        FireEvent( ElementId, 'mouseover' );
    else    
        FireEvent( ElementId, 'mouseout' );
}

function IsMouseOver( ElementId, MouseXPos, MouseYPos )
{
    if( document.getElementById(ElementId) != null )    
    {
        var Element = document.getElementById(ElementId);   
        var Left  = Element.getBoundingClientRect().left, 
            Top   = Element.getBoundingClientRect().top,
            Right = Element.getBoundingClientRect().right,
            Bottom  = Element.getBoundingClientRect().bottom;       
        return ( (MouseXPos >= Left) && (MouseXPos <= Right) && (MouseYPos >= Top) && (MouseYPos <= Bottom))    
    }
    else
        return false;
}

function FireEvent( ElementId, EventName )
{
    if( document.getElementById(ElementId) != null )    
    {   
        if( document.getElementById( ElementId ).fireEvent ) 
        {
            document.getElementById( ElementId ).fireEvent( 'on' + EventName );     
        }
        else 
        {   
            var evObj = document.createEvent( 'Events' );
            evObj.initEvent( EventName, true, false );
            document.getElementById( ElementId ).dispatchEvent( evObj );
        }
    }
}

비슷한 일을해야했지만 jQuery를 사용하고 있으며 이것이 더 나은 해결책이라는 것을 알았습니다.

jQuery의 트리거 기능을 사용하십시오.

$j('#top-div' ).trigger( 'mouseenter' );

필요한 경우 매개 변수를 추가 할 수도 있습니다. 참조 .trigger에 대한 jQuery 문서.

​<a href="index.html" onmouseover="javascript:alert(0);" id="help"​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​>help</a>​​​​​​​​​​​​​​​​​​​​​​​​​​​

​document.getElementById('help').onmouseover();​​​​​​​

나에게 다음은 효과가 있었다:

​document.getElementById('xyz').dispatchEvent(new MouseEvent('mouseover', { 'bubbles': true }));

또한:

​document.getElementById('xyz').dispatchEvent(new MouseEvent('mouseover', { 'view': window, 'bubbles': true, 'cancelable': true }));
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top