在JavaScript中以编程方式触发onmouseover事件

Question

有没有办法以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不会在bottom-div中触发.我需要一种myFunction('some param specific to bottom-div');从top-div 调用的方法

Answer 1

至少在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" );

Answer 2

const mouseoverEvent = new Event('mouseover');

whateverElement.dispatchEvent(mouseoverEvent);

Answer 3

对我来说，以下工作：

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

还：

?document.getElementById('xyz').dispatchEvent(new MouseEvent('mouseover', { 'view': window, 'bubbles': true, 'cancelable': true }));

Answer 4

没有太多的细节,我有一个翻转的img,即mouseout/overs将img src设置为隐藏的表单值(或者这可以在与gloabl变量不同的上下文中完成).我使用了一些javascript来交换我的两个over/out图像值,并且我调用了名为FireEvent(ElementId,"mouseover"); 触发变化.我的javascript在页面上隐藏/显示元素.这导致光标有时会超过我用来触发事件的img - 这与我交换的那个相同,有时光点在点击后没有超过img.

除非您退出并重新输入元素,否则鼠标悬停/退出不会触发,因此在触发事件后,鼠标悬停/退出需要"重新触发"以考虑新光标位置.这是我的解决方案.隐藏/显示各种页面元素,并按照描述进行img src交换后,我调用函数RefreshMouseEvents(ElementId)而不是FireEvent(ElementId,"mouseover").

这适用于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 );
        }
    }
}

Answer 5

经过更多测试后,我不得不修改我的RefreshMouseEvents函数集.这是看似完美的版本(再次只测试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 );
        }
    }
}

Answer 6

我需要做类似的事情，但是我使用的是jQuery，我发现这是一个更好的解决方案：

使用jQuery的触发函数。

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

您也可以根据需要向其中添加参数。请参阅.trigger上的jQuery文档。

Answer 7

你会这样做：

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

然而，正如评论中提到的，在被视为问题之前值得进行测试。