Kích hoạt sự kiện onmouseover lập trình trong JavaScript

Question

Có cách nào để kích hoạt chương trình sự kiện onmouseover bằng JavaScript đơn giản không? hoặc "trích xuất" phương thức từ sự kiện onmouseover để gọi trực tiếp?

ví dụ

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

top-div là trên dưới div, vì vậy onmouseover sẽ không bị sa thải ở dưới div. i cần một cách gọi myFunction('some param specific to bottom-div'); từ phía trên bên div

Answer 1

Bạn sẽ làm điều đó một cái gì đó như thế này:

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

Tuy nhiên, như đã đề cập trong các ý kiến, nó sẽ kiểm tra giá trị trước khi được coi là một vấn đề.

Answer 2

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

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

Answer 3

tôi cần phải làm điều gì đó tương tự, nhưng tôi đang sử dụng jQuery, và tôi thấy đây là một giải pháp tốt hơn: chức năng kích hoạt

Sử dụng jQuery.

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

Bạn cũng có thể thêm thông số vào nó nếu cần. Xem số jQuery documentation on .trigger.

Answer 4

Điều này làm việc cho tôi trong IE9 ít nhất. Nên qua trình duyệt tương thích hoặc gần nó ...

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

Ví dụ onmouseover, gọi hàm như thế này

FireEvent(ElementId, "mouseover"); 

Answer 5

Mà không đi sâu vào chi tiết quá nhiều, tôi đã có một img với hiệu ứng Rollover, tức là mouseout/overs đặt giá trị img src thành ẩn (hoặc điều này có thể thực hiện trong một ngữ cảnh khác với các biến gloabl). Tôi đã sử dụng một số javascript để hoán đổi cả giá trị hình ảnh quá/xuất của tôi và tôi gọi là FireEvent (ElementId, "mouseover"); để kích hoạt thay đổi. Javascript của tôi đã được ẩn/hiển thị các yếu tố trên trang. Điều này khiến cho con trỏ đôi khi vượt quá img mà tôi đã sử dụng để kích hoạt sự kiện - giống như cái mà tôi đã hoán đổi và đôi khi con trỏ không vượt quá img sau khi nhấp chuột.

Di chuyển chuột không kích hoạt trừ khi bạn thoát ra và nhập lại thành phần, vì vậy sau khi sự kiện của tôi được kích hoạt, việc di chuột qua lại cần phải "kích hoạt lại" để chiếm vị trí con trỏ mới. Đây là giải pháp của tôi. Sau khi tôi ẩn/hiển thị các phần tử trang khác nhau, và để làm img src hoán đổi của tôi như mô tả, tôi gọi hàm RefreshMouseEvents (ElementId) thay vì FireEvent (ElementId, "di chuột qua").

Tính năng này hoạt động trong IE9 (không chắc chắn về các trình duyệt khác).

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 6

Tôi đã phải sửa lại bộ chức năng RefreshMouseEvents của mình sau khi thử nghiệm thêm. Đây là phiên bản dường như hoàn thiện (chỉ một lần nữa IE9 được thử nghiệm):

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