Phát hiện xem chuột có trên một phần tử khi tải trang bằng Javascript

Question

Tôi có một hình ảnh mà tôi muốn kích hoạt một số hành vi nhất định khi con chuột kết thúc, tôi có phương pháp di chuột và di chuột, nhưng nếu bạn tình cờ di chuột qua hình ảnh khi tải trang, phương pháp di chuột không bao giờ kích hoạt cho đến khi bạn rời khỏi hình ảnh và quay lại nó.

Có cách nào để phát hiện xem con chuột có vượt qua một phần tử khi đang di chuyển mà không cần phải tắt phần tử và sau đó đi qua phần tử để kích hoạt sự kiện di chuột qua JS không? Cũng giống như có một hàm document.getElementById ("blah"). Hàm mouseIsOver() trong Javascript?

Answer 1

Tôi tin rằng điều này là có thể mà không có bất kỳ hành động nào từ người dùng. Khi trang của bạn tải, hãy liên kết sự kiện mouseover với hình ảnh của bạn và ẩn hình ảnh của bạn (ví dụ: sử dụng CSS display:none). Sử dụng setTimeout() để hiển thị lại sau vài mili giây (10 là đủ). Các thậm chí nên được bắn.

Nếu bạn không muốn gây hiệu ứng 'flick' trên hình ảnh của mình, bạn có thể thử sử dụng một số phần tử tạm thời để thay thế, đính kèm sự kiện vào đó và ủy quyền sự kiện vào hình ảnh của bạn.

Tôi không biết đây có phải là giải pháp đa trình duyệt hay không, nhưng nó hoạt động từ bảng điều khiển Firefox 3.0 của tôi;)

Answer 2

Không có cách nào để có được tọa độ chuột ngoài việc nghe các sự kiện chuột, cụ thể là mousemove, mouseover v.v. Tuy nhiên, những sự kiện này rất nhạy cảm theo hướng di chuyển con trỏ chỉ một pixel là đủ để kích hoạt chúng do đó, có con trỏ di chuột qua hình ảnh của bạn trong khi hoàn toàn vẫn còn hơi khác thường.

Answer 3

Bạn có thể sử dụng sự kiện mousemove. Điều đó sẽ kích hoạt bất cứ lúc nào người dùng di chuyển chuột; do đó, trường hợp duy nhất của trình kích hoạt không kích hoạt sẽ là nếu người dùng không di chuyển chuột, điều này hiếm khi xảy ra.

Vấn đề duy nhất với sự kiện này là sự kiện sẽ kích hoạt bất cứ khi nào chuột di chuyển qua hình ảnh của bạn, vì vậy bạn sẽ nhận được rất nhiều sự kiện trong khi trên thành phần. Những gì bạn có lẽ sẽ cần phải làm là thực hiện một số loại cờ trong phương pháp của bạn khi sự kiện cháy. Bạn bật cờ khi sự kiện đầu tiên kích hoạt và bạn tắt nó khi bạn rời khỏi thành phần.

Điều này ít hơn lý tưởng, nhưng tôi nghĩ điều này có thể sẽ đáp ứng kịch bản sự cố của bạn. Sau đây là một số mã giả nhanh trên những gì mà giải pháp có thể trông giống như, tôi nghĩ rằng nó sẽ làm việc.

<img src="blah.png" onmousemove="JavaScript:triggerOn(event)" onmouseout="JavaScript:triggerOff(event)"/> 


... 

<script type='text/javascript'> 

var TriggerActive = false; 

function triggerOn(e){ 
    e = e||window.e; 
    if(!TriggerActive){ 
    TriggerActive = true; 
    // Do something 
    } else { 
    // Trigger already fired, ignore this event. 
    } 
} 

function triggerOff(e){ 
    e = e||window.e; 
    if(TriggerActive) 
    TriggerActive = false; 
} 

</script> 

Bạn có thể tìm thấy một số thông tin sự kiện chuột tuyệt vời bao gồm ghi chú tương thích trình duyệt here.