Làm cách nào để di chuyển chuột bằng JavaScript?

hạt. js cho phép mô phỏng đầu vào của chuột bằng cách di chuyển con trỏ, nhấp vào nút chuột hoặc thực hiện các cử chỉ kéo

quả hạch. js đi kèm với một đối tượng cấu hình cho phép cấu hình hành vi của nó

1await mouse.move[straightTo[randomPointIn[screen.find[...]]]];
4 định cấu hình độ trễ giữa các lần nhấp chuột và/hoặc cuộn
1await mouse.move[straightTo[randomPointIn[screen.find[...]]]];
5 định cấu hình tốc độ di chuyển của chuột tính bằng pixel trên giây
1await mouse.move[straightTo[randomPointIn[screen.find[...]]]];
6 lấy một Điểm và di chuyển con trỏ chuột đến vị trí này ngay lập tức
1await mouse.move[straightTo[randomPointIn[screen.find[...]]]];
7 trả về một Lời hứa giải quyết điểm con trỏ hiện tại
1await mouse.move[straightTo[randomPointIn[screen.find[...]]]];
8 là phương pháp có mục đích chung để di chuyển chuột trong đai ốc. js. 
Nó nhận một đường dẫn được cung cấp dưới dạng Điểm[] hoặc Lời hứa và một hàm chuyển động kiểu 
1await mouse.move[straightTo[randomPointIn[screen.find[...]]]];
9, trả về danh sách thời lượng tính bằng nano giây. 
1await mouse.move[left[10]];
0 sẽ đi theo con đường này trong các dấu thời gian do hàm chuyển động cung cấp. 
Bằng cách này, bạn có thể tùy chỉnh hoàn toàn hành vi di chuyển của chuột bằng cách triển khai các chức năng riêng để tính toán đường đi và/hoặc thời gian di chuyển. 
1await mouse.move[left[10]];
1 là một chức năng di chuyển lấy Điểm mục tiêu và tính toán đường đi của Điểm[] dẫn từ vị trí chuột hiện tại đến mục tiêu mong muốn
1await mouse.move[left[10]];
2 là hàm trợ giúp lấy Vùng và trả về Điểm trung tâm của vùng đó
1await mouse.move[left[10]];
2 rất phù hợp với 
1await mouse.move[left[10]];
1 vì nó cho phép chúng tôi di chuyển đến trung tâm của Khu vực được trả về bởi e. g. 
1await mouse.move[left[10]];
5
1await mouse.move[straightTo[randomPointIn[screen.find[...]]]];
2
1await mouse.move[left[10]];
6 là một hàm trợ giúp khác lấy một Vùng và trả về một Điểm ngẫu nhiên trong vùng đó
1await mouse.move[left[10]];
6 rất phù hợp với 
1await mouse.move[left[10]];
1 vì nó cho phép chúng tôi di chuyển đến trung tâm của Khu vực được trả về bởi e. g. 
1await mouse.move[left[10]];
5
1await mouse.move[straightTo[randomPointIn[screen.find[...]]]];
1await mouse.move[straightTo[randomPointIn[screen.find[...]]]];
80 là một hàm chuyển động tương đối trả về một đường di chuyển 
1await mouse.move[straightTo[randomPointIn[screen.find[...]]]];
81 pixel ở bên trái vị trí chuột hiện tại của bạn
1await mouse.move[left[10]];
1await mouse.move[straightTo[randomPointIn[screen.find[...]]]];
82 là một hàm chuyển động tương đối trả về một đường di chuyển 
1await mouse.move[straightTo[randomPointIn[screen.find[...]]]];
81 pixel ở bên phải vị trí chuột hiện tại của bạn
1await mouse.move[straightTo[randomPointIn[screen.find[...]]]];
8
1await mouse.move[straightTo[randomPointIn[screen.find[...]]]];
84 là một hàm chuyển động tương đối trả về một đường di chuyển 
1await mouse.move[straightTo[randomPointIn[screen.find[...]]]];
81 pixel lên từ vị trí chuột hiện tại của bạn
1await mouse.move[straightTo[randomPointIn[screen.find[...]]]];
6
1await mouse.move[straightTo[randomPointIn[screen.find[...]]]];
86 là một hàm chuyển động tương đối trả về một đường di chuyển 
1await mouse.move[straightTo[randomPointIn[screen.find[...]]]];
81 pixel xuống từ vị trí chuột hiện tại của bạn
 
Drag'n'Drop là một giải pháp giao diện tuyệt vời. Lấy một thứ gì đó và kéo và thả nó là một cách rõ ràng và đơn giản để thực hiện nhiều việc, từ sao chép và di chuyển tài liệu [như trong trình quản lý tệp] đến đặt hàng [bỏ các mặt hàng vào giỏ hàng]
Trong tiêu chuẩn HTML hiện đại, có một phần về Kéo và Thả với các sự kiện đặc biệt như 
1await mouse.move[straightTo[randomPointIn[screen.find[...]]]];
91, 
1await mouse.move[straightTo[randomPointIn[screen.find[...]]]];
92, v.v.
Những sự kiện này cho phép chúng tôi hỗ trợ các loại kéo và thả đặc biệt, chẳng hạn như xử lý việc kéo tệp từ trình quản lý tệp của hệ điều hành và thả tệp đó vào cửa sổ trình duyệt. Sau đó, JavaScript có thể truy cập nội dung của các tệp đó
Nhưng Sự kiện kéo gốc cũng có những hạn chế. Chẳng hạn, chúng tôi không thể ngăn việc kéo từ một khu vực nhất định. Ngoài ra, chúng tôi không thể chỉ thực hiện thao tác kéo "ngang" hoặc "dọc". Và còn rất nhiều thao tác kéo thả khác không dùng được. Ngoài ra, thiết bị di động hỗ trợ cho các sự kiện như vậy là rất yếu
Vì vậy, ở đây chúng ta sẽ xem cách triển khai Drag’and’Drop bằng các sự kiện chuột
Thuật toán Drag'n'Drop
Thuật toán Drag'n'Drop cơ bản trông như thế này
Trên 
1await mouse.move[straightTo[randomPointIn[screen.find[...]]]];
93 – chuẩn bị phần tử để di chuyển, nếu cần [có thể tạo một bản sao của nó, thêm một lớp vào nó hoặc bất cứ thứ gì]
Sau đó, trên 
1await mouse.move[straightTo[randomPointIn[screen.find[...]]]];
94, hãy di chuyển nó bằng cách thay đổi 
1await mouse.move[straightTo[randomPointIn[screen.find[...]]]];
95 bằng 
1await mouse.move[straightTo[randomPointIn[screen.find[...]]]];
96
Trên 
1await mouse.move[straightTo[randomPointIn[screen.find[...]]]];
97 – thực hiện tất cả các hành động liên quan đến việc hoàn thành thao tác kéo và thả
Đây là những điều cơ bản. Sau này, chúng ta sẽ xem cách thêm các tính năng khác, chẳng hạn như làm nổi bật các phần tử cơ bản hiện tại trong khi chúng ta kéo qua chúng
Đây là cách thực hiện kéo bóng
1await mouse.move[straightTo[randomPointIn[screen.find[...]]]];
6
Nếu chúng tôi chạy mã, chúng tôi có thể nhận thấy điều gì đó kỳ lạ. Khi bắt đầu drag'n'drop, quả bóng "nĩa". chúng tôi bắt đầu kéo "bản sao" của nó

  

Đây là một ví dụ trong hành động
Hãy thử kéo và thả bằng chuột và bạn sẽ thấy hành vi như vậy
Đó là bởi vì trình duyệt có hỗ trợ kéo và thả riêng cho hình ảnh và một số yếu tố khác. Nó chạy tự động và xung đột với chúng tôi
Để vô hiệu hóa nó
1await mouse.move[straightTo[randomPointIn[screen.find[...]]]];
9
Bây giờ mọi thứ sẽ ổn thôi
trong hành động
Một khía cạnh quan trọng khác – chúng tôi theo dõi 
1await mouse.move[straightTo[randomPointIn[screen.find[...]]]];
94 trên 
1await mouse.move[straightTo[randomPointIn[screen.find[...]]]];
99, không phải trên 
1await mouse.move[straightTo[randomPointIn[screen.find[...]]]];
00. Ngay từ cái nhìn đầu tiên, có vẻ như con chuột luôn ở trên quả bóng và chúng ta có thể đặt 
1await mouse.move[straightTo[randomPointIn[screen.find[...]]]];
94 vào nó
Nhưng như chúng tôi nhớ, 
1await mouse.move[straightTo[randomPointIn[screen.find[...]]]];
94 kích hoạt thường xuyên, nhưng không phải cho mọi pixel. Vì vậy, sau khi di chuyển nhanh, con trỏ có thể nhảy từ quả bóng ở đâu đó ở giữa tài liệu [hoặc thậm chí bên ngoài cửa sổ]
Vì vậy, chúng ta nên nghe trên 
1await mouse.move[straightTo[randomPointIn[screen.find[...]]]];
99 để nắm bắt nó
Định vị chính xác
Trong các ví dụ trên, quả bóng luôn được di chuyển sao cho tâm của nó nằm dưới con trỏ
1await mouse.move[straightTo[randomPointIn[screen.find[...]]]];
0
Không tệ, nhưng có một tác dụng phụ. Để bắt đầu kéo và thả, chúng ta có thể ________ 293 ở bất kỳ đâu trên quả bóng. Nhưng nếu “lấy” nó từ mép của nó, thì quả bóng đột nhiên “nhảy” trở thành tâm dưới con trỏ chuột
Sẽ tốt hơn nếu chúng ta giữ nguyên dịch chuyển ban đầu của phần tử so với con trỏ
Chẳng hạn, nếu chúng ta bắt đầu kéo theo cạnh của quả bóng, thì con trỏ sẽ vẫn ở trên cạnh trong khi kéo
Hãy cập nhật thuật toán của chúng tôi
Khi khách nhấn nút [
1await mouse.move[straightTo[randomPointIn[screen.find[...]]]];
93] – ghi nhớ khoảng cách từ con trỏ đến góc trên bên trái của quả bóng theo biến số 
1await mouse.move[straightTo[randomPointIn[screen.find[...]]]];
06. Chúng tôi sẽ giữ khoảng cách đó trong khi kéo
Để có được những thay đổi này, chúng ta có thể trừ tọa độ
1await mouse.move[straightTo[randomPointIn[screen.find[...]]]];
8
Sau đó, trong khi kéo, chúng tôi định vị quả bóng trên cùng một dịch chuyển so với con trỏ, như thế này

  

1await mouse.move[straightTo[randomPointIn[screen.find[...]]]];
9
Mã cuối cùng với vị trí tốt hơn
1await mouse.move[straightTo[randomPointIn[screen.find[...]]]];
0
Đang hoạt động [bên trong 
1await mouse.move[straightTo[randomPointIn[screen.find[...]]]];
07]
Sự khác biệt đặc biệt đáng chú ý nếu chúng ta kéo quả bóng ở góc dưới cùng bên phải của nó. Trong ví dụ trước quả bóng “nhảy” dưới con trỏ. Bây giờ nó trôi chảy theo con trỏ từ vị trí hiện tại
Mục tiêu thả tiềm năng [droppables]
Trong các ví dụ trước, quả bóng có thể được thả xuống "bất cứ đâu" để ở lại. Trong cuộc sống thực, chúng ta thường lấy một yếu tố và thả nó vào một yếu tố khác. Chẳng hạn, một “tệp” vào một “thư mục” hoặc một cái gì đó khác
Nói một cách trừu tượng, chúng tôi lấy một phần tử “có thể kéo” và thả nó vào phần tử “có thể thả xuống”
chúng ta cần biết
nơi phần tử được thả ở cuối Drag'n'Drop - để thực hiện hành động tương ứng,
và tốt nhất là biết droppable mà chúng ta đang kéo qua, để làm nổi bật nó
Giải pháp khá thú vị và hơi phức tạp một chút, vì vậy hãy đề cập đến nó ở đây
Điều gì có thể là ý tưởng đầu tiên? 
Nhưng điều đó không hiệu quả
Vấn đề là, trong khi chúng ta đang kéo, phần tử có thể kéo được luôn ở trên các phần tử khác. Và các sự kiện chuột chỉ xảy ra ở phần tử trên cùng, không xảy ra ở phần tử bên dưới nó
Chẳng hạn, bên dưới là hai phần tử 
1await mouse.move[straightTo[randomPointIn[screen.find[...]]]];
09, phần tử màu đỏ ở trên phần tử màu xanh lam [bao phủ hoàn toàn]. Không có cách nào để bắt một sự kiện trên màu xanh lam, vì màu đỏ ở trên cùng
1await mouse.move[straightTo[randomPointIn[screen.find[...]]]];
4
Tương tự với phần tử có thể kéo. Quả bóng luôn ở trên cùng so với các yếu tố khác, vì vậy các sự kiện xảy ra trên đó. Bất kỳ trình xử lý nào chúng tôi đặt trên các phần tử thấp hơn, chúng sẽ không hoạt động
Đó là lý do tại sao ý tưởng ban đầu đưa trình xử lý vào các thiết bị có thể phân tán tiềm năng không hoạt động trong thực tế. Họ sẽ không chạy
Vậy lam gi?
Có một phương pháp gọi là 
1await mouse.move[straightTo[randomPointIn[screen.find[...]]]];
80. Nó trả về phần tử được lồng nhiều nhất trên tọa độ tương đối của cửa sổ đã cho [hoặc 
1await mouse.move[straightTo[randomPointIn[screen.find[...]]]];
81 nếu tọa độ đã cho nằm ngoài cửa sổ]. Nếu có nhiều phần tử trùng lặp trên cùng một tọa độ, thì phần tử trên cùng sẽ được trả về

  

Chúng tôi có thể sử dụng nó trong bất kỳ trình xử lý sự kiện chuột nào của chúng tôi để phát hiện tiềm năng có thể bỏ qua dưới con trỏ, như thế này
1await mouse.move[straightTo[randomPointIn[screen.find[...]]]];
7
Xin lưu ý. chúng ta cần giấu quả bóng trước cuộc gọi 
1await mouse.move[straightTo[randomPointIn[screen.find[...]]]];
82. Nếu không, chúng tôi thường có một quả bóng trên các tọa độ này, vì nó là phần tử trên cùng bên dưới con trỏ. 
1await mouse.move[straightTo[randomPointIn[screen.find[...]]]];
83. Vì vậy, chúng tôi ẩn nó và ngay lập tức hiển thị lại
Chúng ta có thể sử dụng mã đó để kiểm tra phần tử nào chúng ta đang “bay qua” bất cứ lúc nào. Và xử lý sự sụt giảm khi nó xảy ra
Mã mở rộng của 
1await mouse.move[straightTo[randomPointIn[screen.find[...]]]];
84 để tìm các phần tử “có thể bỏ được”
1await mouse.move[left[10]];
1
Trong ví dụ bên dưới khi quả bóng được kéo qua khung thành bóng đá, khung thành được tô sáng
Kết quả
Phong cách. css
mục lục. html
1await mouse.move[left[10]];
2
1await mouse.move[straightTo[randomPointIn[screen.find[...]]]];
90
Bây giờ chúng tôi có "mục tiêu thả" hiện tại mà chúng tôi đang bay qua, trong biến số 
1await mouse.move[straightTo[randomPointIn[screen.find[...]]]];
85 trong toàn bộ quá trình và có thể sử dụng nó để đánh dấu hoặc bất kỳ nội dung nào khác
Tóm lược
Chúng tôi đã xem xét một thuật toán Drag'n'Drop cơ bản
Các thành phần chính
Dòng sự kiện. 
1await mouse.move[straightTo[randomPointIn[screen.find[...]]]];
86 → 
1await mouse.move[straightTo[randomPointIn[screen.find[...]]]];
87 → 
1await mouse.move[straightTo[randomPointIn[screen.find[...]]]];
88 [đừng quên hủy bản địa 
1await mouse.move[straightTo[randomPointIn[screen.find[...]]]];
89]
Khi bắt đầu kéo – ghi nhớ sự thay đổi ban đầu của con trỏ so với phần tử. 
1await mouse.move[straightTo[randomPointIn[screen.find[...]]]];
06 và giữ nó trong quá trình kéo
Phát hiện các phần tử có thể kéo xuống bên dưới con trỏ bằng cách sử dụng 
1await mouse.move[straightTo[randomPointIn[screen.find[...]]]];
91
Chúng ta có thể đặt rất nhiều trên nền tảng này
Vào ngày 
1await mouse.move[straightTo[randomPointIn[screen.find[...]]]];
97, chúng ta có thể hoàn thiện việc giảm giá một cách trí tuệ. thay đổi dữ liệu, di chuyển các yếu tố xung quanh
Chúng tôi có thể làm nổi bật các yếu tố mà chúng tôi đang bay qua
Chúng ta có thể giới hạn kéo theo một khu vực hoặc hướng nhất định
Chúng tôi có thể sử dụng ủy quyền sự kiện cho 
1await mouse.move[straightTo[randomPointIn[screen.find[...]]]];
93. Trình xử lý sự kiện diện rộng kiểm tra 
1await mouse.move[straightTo[randomPointIn[screen.find[...]]]];
94 có thể quản lý Drag'n'Drop cho hàng trăm phần tử
Và như thế
Có các khung xây dựng kiến ​​trúc trên đó. 
1await mouse.move[straightTo[randomPointIn[screen.find[...]]]];
95, 
1await mouse.move[straightTo[randomPointIn[screen.find[...]]]];
96, 
1await mouse.move[straightTo[randomPointIn[screen.find[...]]]];
97 và các lớp khác. Hầu hết trong số họ làm những thứ tương tự như những gì được mô tả ở trên, vì vậy bây giờ sẽ dễ hiểu họ. Hoặc cuộn của riêng bạn, vì bạn có thể thấy rằng điều đó đủ dễ thực hiện, đôi khi dễ hơn việc điều chỉnh giải pháp của bên thứ ba
 

			
Làm cách nào để di chuyển chuột bằng JavaScript?
			
Để làm điều này, chúng tôi sử dụng  tài liệu.  elementFromPoint[x+px, y+py] trong đó chúng tôi chuyển vị trí của con trỏ hình ảnh . Điều này sẽ cho chúng ta đối tượng của phần tử, con trỏ hình ảnh đang bật. 
		
			
Làm cách nào để có được vị trí chuột trong JavaScript?
			
Để lấy tọa độ chuột trong JavaScript, hãy áp dụng thuộc tính “clientX” và “clientY” với sự kiện  title để nhận tọa độ chuột mới nhất khi nhấp vào nút, thuộc tính “pageX” và “pageY” và phương thức “addEventListener[]” để nhận 
		
			
MouseMove JavaScript là gì?
			
MouseMove là  một sự kiện đơn giản được thực thi khi con trỏ di chuyển qua hoặc xung quanh một phần tử . Mousemove là một sự kiện javascript bên trong một trang web. Sự kiện mousemove cũng có thể được hiểu là một phần của trình xử lý sự kiện, theo đó một số hành động hoặc chuyển động của con trỏ chuột, một tập lệnh dự định sẽ được thực thi. 
		
			
Có chương trình nào di chuyển chuột của bạn không?
			
Ứng dụng rung chuột là một chương trình bạn cài đặt để yêu cầu máy tính của bạn di chuyển con trỏ sau một khoảng thời gian không hoạt động nhất định . Nhiều chương trình trong số này [đặc biệt là dành cho PC] là miễn phí và một số chương trình tốt hơn sẽ cho phép bạn tùy chỉnh cách thức và vị trí con trỏ của bạn sẽ di chuyển quanh màn hình.