Fatal编程技术网
  • javascript/
  • 在JavaScript中以编程方式触发onmouseover事件

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

javascript

在JavaScript中以编程方式触发onmouseover事件,javascript,dom-events,onmouseover,Javascript,Dom Events,Onmouseover,有没有一种方法可以在纯JavaScript中以编程方式触发onmouseover事件？或者从onmouseover事件中“提取”方法以直接调用它 乙二醇 top div位于bottom div之上，因此在bottom-div中不会触发onmouseover。我需要一种调用myFunction（“一些特定于bottom div的参数”）的方法从顶部div您可以这样做： document.getElementById('top-div').onmouseover(); 然而，正如评论中提到的，

有没有一种方法可以在纯JavaScript中以编程方式触发
onmouseover
事件？或者从
onmouseover
事件中“提取”方法以直接调用它

乙二醇
top div位于bottom div之上，因此在bottom-div中不会触发
onmouseover
。我需要一种调用
myFunction（“一些特定于bottom div的参数”）的方法从顶部div
您可以这样做：


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


然而，正如评论中提到的，在考虑问题之前，它值得测试。
​​​​​​​​​​​​​​​​​​​​​​​​​​​​

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

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


​document.getElementById（'help'）.onmouseover（）；​​​​​​​

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

使用jQuery的触发器函数


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



如果需要，还可以向其添加参数。请参阅。
这至少在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" );



在没有太多细节的情况下，我有一个带滚动的img，即mouseout/overs，它将img src设置为隐藏形式值（或者这可以在不同的上下文中使用gloabl变量）。我使用了一些javascript来交换我的over/out图像值，并调用了firevent（ElementId，“mouseover”）；触发变化。我的javascript在页面上隐藏/显示元素。这导致光标有时位于我用来触发事件的img上-这与我正在交换的img相同，有时在单击后光标不在img上

除非退出并重新输入元素，否则Mouseover/out不会触发，因此在触发my事件后，Mouseover/out需要“重新触发”以说明新的光标位置。这是我的解决办法。在我隐藏/显示各种页面元素之后，为了按照描述进行img src交换，我调用函数RefreshMouseEvents（ElementId），而不是firevent（ElementId，“mouseover”）

这适用于IE9（不确定其他浏览器）


函数刷新鼠标事件（ElementId）
{
FireEvent（ElementId，“鼠标悬停”）；
setTimeout（“TriggerMouseEvent（““+ElementId+”）”，1）；
}
函数TriggerMouseEvent（ElementId）
{
if（IsMouseOver（ElementId，event.clientX，event.clientY））
FireEvent（ElementId，“鼠标悬停”）；
其他的
FireEvent（ElementId，“mouseout”）；
}
函数IsMouseOver（ElementId、MouseXPos、MouseYPos）
{
if（document.getElementById（ElementId）！=null）
{
var Element=document.getElementById（ElementId）；
var Left=Element.getBoundingClientRect（）.Left，
Top=Element.getBoundingClientRect（）.Top，
右=元素。getBoundingClientRect（）。右，
Bottom=Element.getBoundingClientRect（）.Bottom；

return（（MouseXPos>=Left）&&（MouseXPos=Top）&&（MouseYPos经过更多测试后，我不得不修改我的RefreshMouseeEvents函数集。下面是看似完美的版本（同样只测试了IE9）：


函数刷新鼠标事件（ElementId）
{
FireEvent（ElementId，“鼠标悬停”）；
setTimeout（“TriggerMouseEvent（“+ElementId+”，“+event.clientX+”，“+event.clientY+”），1）；
}
函数TriggerMouseEvent（ElementId、MouseXPos、MouseYPos）
{
if（IsMouseOver（ElementId，（1*MouseXPos），（1*MouseYPos）））
FireEvent（ElementId，“鼠标悬停”）；
其他的
FireEvent（ElementId，“mouseout”）；
}
函数IsMouseOver（ElementId、MouseXPos、MouseYPos）
{
if（document.getElementById（ElementId）！=null）
{
var Element=document.getElementById（ElementId）；
var Left=Element.getBoundingClientRect（）.Left，
Top=Element.getBoundingClientRect（）.Top，
右=元素。getBoundingClientRect（）。右，
Bottom=Element.getBoundingClientRect（）.Bottom；

为我返回（（MouseXPos>=左）&&（MouseXPos=顶）&&（MouseYPos），如下所示：


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


此外：


你试过了吗？onmouseover事件应该在父事件上触发，这也要归功于事件传播。好的，我没有想到，很抱歉，这是一个稍微糟糕的例子，因为在我的应用程序中，它们实际上不是嵌套的元素。最上面的div绝对位于许多其他元素之上。@Piskvor:我试图减少一个非常复杂的piec一个简单的例子，我犯了一个错误。如果这冒犯了你，我很抱歉。@Fearofahackplanet:我为我傲慢的评论道歉，删除了。（事实部分：“元素重叠！=元素嵌套”）1-liner版本（在Chrome控制台中测试）元素。dispatchEvent（e=（document.createEvent（'Events'）），e.initEvent（“mouseenter”，true，false），e）我没有意识到它这么简单！我肯定我以前也尝试过用onclick做类似的事情，但它不起作用。也许我的记忆力不好。我不确定这是否起作用，但我相信它至少应该没有“on”前缀。不起作用
Uncaught TypeError:e.previousElementSibling.onmouseover不是一个函数（…）请考虑接受一个不同的答案。这个方案在大多数情况下是行不通的，气馁。 — 只有当函数绑定到
onmouseover
属性时，它才会起作用，但是
addEventListener
是首选。这个答案不适用于这个标准API，但是，投票最多的API适用于任何方法。当人们投票反对答案而不说方式时，我觉得很可笑。所以，对于投票反对我的API的人来说回答，请解释原因，以便我能学到一些新东西。我不认为我的答案是最好的，但它对我很有效。如果你发现问题，请添加评论，以便我们知道原因，或者更好，以便我能改进我的答案。也许是因为

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 );
        }
    }
}



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 );
        }
    }
}



const mouseoverEvent = new Event('mouseover');

whateverElement.dispatchEvent(mouseoverEvent);



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



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