Có cách nào kích hoạt mousemove và nhận event.pageX, event.pageY không?

Question

Vì vậy, giống như câu hỏi chỉ định, có cách nào để kích hoạt sự kiện mousemove trong jQuery cũng gửi tọa độ chuột đến Object sự kiện không?

Cho đến nay mã của tôi có thể kích hoạt mousemove bằng chức năng .trigger (event) nhưng event.pageX và event.pageY không xác định.

Answer 1

Tôi không tin rằng có thể nhận tọa độ chuột theo yêu cầu thông qua JavaScript/jQuery; tuy nhiên nếu bạn ràng buộc vị trí đến một var toàn cầu thì bạn có thể truy cập chúng bất cứ lúc nào trong suốt tài liệu như thế này:

$(document).ready(function(){ 
    $().mousemove(function(e){ 
     window.xPos = e.pageX; 
     window.yPos = e.pageY; 
    }); 
}); 

cho một ít CPU tùy chọn chuyên sâu, bạn có thể thêm một thời gian chờ, mặc dù bạn kinh doanh hiệu suất cho một chút chậm trễ trong việc biết nơi chuột là:

function getMousePosition(timeoutMilliSeconds) { 
    $(document).one("mousemove", function (event) { 
     window.xPos = event.pageX; 
     window.yPos = event.pageY; 
     setTimeout("getMousePosition(" + timeoutMilliSeconds + ")", timeoutMilliSeconds); 
    }); 
} 
getMousePosition(100); 

Bây giờ bạn có thể truy cập vào window.xPos và window.yPos từ bất cứ nơi nào trong tài liệu bằng cách sử dụng giải pháp mà không cần phải kích hoạt một sự kiện giả.

Answer 2

Tôi không chắc mình hoàn toàn hiểu được câu hỏi. Bạn có thể làm:

$('.someClass').mousemove(function(event){ 
    console.log(event.pageX); 
    console.log(event.pageY); 
}); 

Bây giờ, bất cứ khi nào chuột di chuyển qua someClass, nó sẽ đăng ký xy cordinates. Đây là số jsfiddle để xem nó hoạt động và jquery documentation.

Answer 3

Bạn không thể di chuyển chuột nếu đó là những gì bạn đang yêu cầu. Nhưng bạn có thể gọi một hàm với bất kỳ bối cảnh và đối số nào bạn muốn. Ví dụ:

function foobar(e) 
{ 
    this.className = 'whatever'; // this == element 
} 

someElement.onmousemove = foobar; 

var obj = {whatever:'you want'}; 
foobar.call(someElement, obj); // calls foobar(obj) in context of someElement 

Answer 4

Hãy suy nghĩ tôi biết vấn đề của bạn. Bạn đang cố truy vấn vị trí chuột theo lập trình. Có lẽ bạn có mã như sau:

$(document).one('mousemove.myModule', function (e) { 
    // e.pageY and e.pageX is undefined. 
    console.log('e.pageY: ' + e.pageY + ', e.pageX: ' + e.pageX); } 
     ).trigger('mousemove.myModule'); 

Sau đó, bạn hoàn toàn đúng. Các thuộc tính pageY và pageX trên đối tượng sự kiện sẽ không được xác định. Trên thực tế, có nhiều lỗ hổng trong đối tượng sự kiện sẽ không có ở đó, không chỉ là .pageY và .pageX. Có thể là một số lỗi trong jQuery. Dù sao, chỉ cần không chuỗi cuộc gọi đó để kích hoạt và kích hoạt sự kiện trên $ (cửa sổ) thay thế. Đừng hỏi tôi tại sao nó hoạt động mặc dù nhưng đối với tôi nó đã làm:

$(document).one('mousemove.myModule', function (e) { 
    console.log('e.pageY: ' + e.pageY + ', e.pageX: ' + e.pageX); }); 

// Now e.pageY and e.pageX will be defined! 
$(window).trigger('mousemove.myModule'); 

Answer 5

Bạn cần phải thiết lập pageX và pageY trực tiếp trước khi kích hoạt sự kiện này. Để đặt các thuộc tính này, hãy tạo đối tượng jQuery.Event.

// create a jQuery event 
e = $.Event('mousemove'); 

// set coordinates 
e.pageX = 100; 
e.pageY = 100; 

// trigger event - must trigger on document 
$(document).trigger(e); 

See it in jsFiddle.

Answer 6

Đây là điều tốt nhất tôi có thể nghĩ ra, điều đó không làm bạn bối rối khi thiết lập các biến toàn cục. Sự kiện nhấp chuột sẽ vẫn nắm bắt được tọa độ, vì vậy bạn có thể chuyển sự kiện đó vào mousemove của bạn.

$(element).click(function(e){ 
    $(element).trigger('mousemove',e); 
}); 

Sau đó, đối tượng sự kiện đó sẽ là đối số thứ hai trong hàm mousemove của bạn; đầu tiên là sự kiện mousemove thực tế hoặc sự kiện tạo jQuery.

$(element).mousemove(function(e,clickEvent){ 
    if typeof e.pageX === 'undefined' e = clickEvent; 
    // or if you prefer, clickEvent.pageX; 
});