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

xfyts7mz  于 2023-02-11  发布在  Java
关注(0)|答案(9)|浏览(187)

有没有办法在纯JavaScript中以编程方式触发onmouseover事件?或者从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中被激发。我需要一种从top-div调用myFunction('some param specific to bottom-div');的方法

vjhs03f7

vjhs03f71#

const mouseoverEvent = new Event('mouseover');

whateverElement.dispatchEvent(mouseoverEvent);
ia2d9nvy

ia2d9nvy2#

这对我来说至少在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" );
qni6mghb

qni6mghb3#

对我来说,以下工作:

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

还有:

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

mpgws1up4#

我不需要太多的细节,我有一个带翻转的img,即mouseout/overs,它将img src设置为隐藏的表单值(或者这可以在不同的上下文中使用globl变量来完成)。我使用一些javascript来交换我的over/out图像值,并调用调用的FireEvent(ElementId,“mouseover”);来触发更改。我的JavaScript在页面上隐藏/显示元素。这导致光标有时会在我用来触发事件的img上-这和我换出来的那个一样,有时点击后光标不在img上。
Mouseover/out不会触发,除非你退出并重新输入一个元素,所以在我的事件被触发后,mouseover/out需要“重新触发”来考虑新的光标位置。下面是我的解决方案。在我隐藏/显示各种页面元素后,并按照描述进行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 );
        }
    }
}
r7knjye2

r7knjye25#

经过更多的测试之后,我不得不修改我的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 );
        }
    }
}
js5cn81o

js5cn81o6#

我需要做一些类似的事情,但我使用的是jQuery,我发现这是一个更好的解决方案:
使用jQuery的触发器函数。

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

如果需要的话,你也可以给它添加参数,参见jQuery documentation on .trigger

cclgggtu

cclgggtu7#

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

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

dgtucam18#

我正在使用Angular,尝试做一个类似的事情。我从StackOverflow Click here得到了这个答案。基本上,这个想法是添加和删除hover类

public addHoverOnClick() {
    const yourElement = document.getElementById('elementID') as HTMLElement;
    yourElement .classList.add('hover')

}

public removeHoverOnClick() {
    const yourElement = document.getElementById('elementID') as HTMLElement;
    yourElement .classList.remove('hover')
}
ldfqzlk8

ldfqzlk89#

你可以这样做:

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

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

相关问题