jQuery: Làm thế nào để kiểm tra xem chuột xuất hiện nhiều yếu tố

Question

Tôi có một chức năng thu nhập hoãn lại liên kết với một sự kiện mouseenter:

$(window).load(function(e) { 
    var $container = $('.container'); 
    $container.mouseenter(function(e) { 
    //do something 
    }); 
    ... 
}); 

Vấn đề là chuột có thể đã được trên phần tử khi sự kiện cháy tải, do đó trước khi sự kiện mouseenter bị ràng buộc.
tôi có thể làm được việc này bằng cách đặt một số mã ở phần cuối của bộ xử lý tải trang để làm một kiểm tra một lần nếu chuột nằm trong phần tử và kích hoạt các sự kiện mouseenter bằng tay:

// check if the mouse is inside $container 
if(mouse is inside $container) 
    $container.mouseenter(); 

Làm thế nào tôi có thể kiểm tra xem con chuột có vượt quá phần tử trong sự kiện tải không?

Tôi đã thử $container.is(':hover') nhưng không hoạt động.

Answer 1

Tôi đã đi với giải pháp di chuột css trong Detect mouse hover on page load with jQuery vì không yêu cầu sự kiện di chuột.

Answer 2

Mouseover sự kiện thực hiện chính xác những gì bạn muốn.

Nếu .conteiner không tồn tại trong thời gian bạn đính kèm sự kiện di chuột (được thêm động trong tương lai), bạn phải sử dụng phương pháp .live để đính kèm sự kiện.

$(".conteiner").live("mouseover", function() { 
    alert("hovered!"); 
}) 

Nó cũng sẽ hoạt động khi chuột đã ở vị trí mà phần tử mới xuất hiện.Example here!

Đối với jQuery 1.7+ bạn nên sử dụng phương pháp .on thay vì phương thức .live không được dùng nữa. Example here!

Answer 3

$('.container').mouseover(function(e) { 
    //do something 
}); 

Answer 4

Cách tốt nhất để làm điều này là để có được trái, phải, trên và dưới bù đắp của nguyên tố này và xem liệu vị trí chuột nằm bất cứ nơi nào giữa những giá trị đó.

Example.

Đặt chuột lên div lần đầu tiên tải. Sau đó làm mới trang (nhấn F5 để bạn không phải di chuyển chuột). Khi trang tải hoàn toàn vào lần tiếp theo, trang sẽ cảnh báo bằng "Di chuột!" ngay cả khi bạn chưa di chuyển chuột.

Hoặc cách dễ dàng hơn nữa. Chỉ cần kiểm tra e.target.id của sự kiện MouseMove (mà dường như bắn một lần tải trang, ngay cả khi không di chuyển chuột) chống lại id của nguyên tố này, như vậy:

$(document).mousemove(function(e){ 
    if(e.target.id === 'hoverTest'){ 
     alert("Hovered!"); 
    } 
}); 

Example (làm các bước tương tự như trên).

Answer 5

tôi không kiểm tra nó được nêu ra nhưng nghĩ rằng bạn muốn như thế này ...

function checkMouseCollision(obj) { 
    var offset = obj.offset(); 
    objX= offset.left; 
    objY=offset.top; 
    objW=obj.width(); 
    objH=obj.height(); 

    var mouseX = 0; 
    var mouseY = 0; 
    $().mousemove(function(e) { 
    mouseX = e.pageX; 
    mouseY = e.pageY; 
    }); 

    if((mouseX>objX&&mouseX<objX+objW)&&(mouseY>objY&&mouseY<objY+objH)){ 
     alert("hovered")  
    }; 
}; 
checkCollision($(".box")) 

Answer 6

Với jQuery 1.7+ bạn sẽ muốn sử dụng .on(): http://api.jquery.com/on/

$(document).ready(function(){ 
    $('body').on("mouseover", "your_element_selector_here", function() { 
     // do stuff here 
    }); 
}); 

.live là không được chấp nhận. Bạn cũng có thể đặt bất kỳ sự kiện nào khác vào .on, tùy thuộc vào những gì bạn cần. : hover không hoạt động vì nó chỉ hoạt động với các phần tử cụ thể và dựa trên css.

Sử dụng điều này cùng với phương pháp phát hiện bù đắp trước khi trang tải xong sẽ đưa bạn đến nơi bạn muốn.