在JavaScript编程触发onmouseover事件

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

题

有一种方法以编程触发普通的JavaScript的onmouseover事件？或“提取物”，从onmouseover事件的方法来直接调用它？

例如

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

顶DIV是上述底DIV，所以onmouseover不会得到在底DIV烧制。我需要调用从顶DIV myFunction('some param specific to bottom-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来交换我的两个在输入/输出图像值的，我叫叫FireEvent（ElementId，“鼠标悬停”）;触发的变化。我的JavaScript躲在/显示页面上的元素。这使得光标有时超过我以前触发事件的IMG - 这是同一个我一直在换出，有时光标不是在点击后的IMG。

除非你退出并重新进入一个元素，所以我的后触发事件的鼠标悬停/输出需要“重新触发”考虑到新的光标位置将鼠标悬停/出不火。这里是我的解决方案。后我隐藏/显示各种页面元素，并做我IMG SRC交换如所描述的，我调用函数RefreshMouseEvents（ElementId）代替FireEvent（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 );
        }
    }
}

我有更多的测试后修改我的设置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 );
        }
    }
}

我需要做同样的事情，但我使用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 }));
不隶属于 StackOverflow
scroll top