49

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调用的方法

4

8 回答 8

61 
const mouseoverEvent = new Event('mouseover');

whateverElement.dispatchEvent(mouseoverEvent);
于 2018-03-12T23:32:37.503 回答
39

这至少在 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" );
于 2012-12-01T00:17:49.083 回答
19

对我来说，以下工作：

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

还：

​document.getElementById('xyz').dispatchEvent(new MouseEvent('mouseover', { 'view': window, 'bubbles': true, 'cancelable': true }));
于 2019-08-15T04:03:12.400 回答
7

没有过多的细节，我有一个带有翻转的img，即mouseout/overs 将img src 设置为隐藏的表单值（或者这可以在具有全局变量的不同上下文中完成）。我使用了一些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 );
        }
    }
}
于 2012-12-02T01:07:47.553 回答
7

经过更多测试后，我不得不修改我的 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 );
        }
    }
}
于 2012-12-06T16:48:32.170 回答
3

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

使用 jQuery 的触发功能。

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

如果需要，您还可以为其添加参数。请参阅.trigger 上的 jQuery 文档。

于 2012-08-24T02:52:56.283 回答
1 
​&lt;a href="index.html" onmouseover="javascript:alert(0);" id="help"​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​&gt;help</a>​​​​​​​​​​​​​​​​​​​​​​​​​​​

​document.getElementById('help').onmouseover();​​​​​​​
于 2010-07-07T05:59:48.903 回答
-29

你会这样做：

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

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

于 2010-02-09T10:44:44.550 回答