Trong hướng dẫn này, chúng ta sẽ hiểu cách theo dõi vị trí chuột trong JavaScript bằng cách sử dụng các sự kiện chuột.

Bạn đang xem : javascript lấy vị trí chuột

Để theo dõi chuyển động của chuột trong JavaScript, chúng tôi sử dụng trình xử lý sự kiện. Người nghe sự kiện là thứ luôn lắng nghe những thay đổi đang diễn ra. Ví dụ: sự kiện mousedown chỉ được kích hoạt khi người dùng nhấp vào nút chuột.

Có nhiều sự kiện chuột khác nhau có sẵn trong JavaScript, trong đó chúng tôi sẽ tập trung vào sự kiện mousemove khi chúng tôi muốn theo dõi vị trí của con chuột. Để xem danh sách đầy đủ các sự kiện chuột, bạn có thể truy cập tài liệu MDN Sự kiện chuột .

Các cách theo dõi sự kiện chuột khác nhau trong JavaScript

Để theo dõi vị trí chuột, chúng ta phải tìm x-axis (vị trí ngang) và y-axis (vị trí dọc) bên trong tab của trình duyệt. Bạn có thể biết rằng góc trên bên trái của trình duyệt được biểu thị bằng (0,0) . Nếu bạn di chuyển chuột theo chiều ngang, vị trí x của chuột sẽ thay đổi và nếu bạn di chuyển chuột theo chiều dọc, vị trí y của chuột sẽ thay đổi.

Có hai cách khác nhau để lấy các vị trí x y này của chuột trong tab của trình duyệt và những cách này như sau.

  1. Nếu bạn muốn theo dõi các vị trí chuột liên quan đến kích thước của trang web, hãy sử dụng pageX pageY .
  2. Nếu bạn muốn theo dõi vị trí chuột dựa trên vùng hiển thị của màn hình, sử dụng clientX clientY .

Theo dõi Vị trí Chuột Sử dụng PageX , PageY clientX , clientY trong JavaScript

Hãy hiểu cả hai cách này với ví dụ dưới đây.

  & lt;! DOCTYPE html & gt;
& lt; html lang = "vi" & gt;
& lt; đầu & gt;
    & lt; meta charset = "UTF-8" & gt;
    & lt; meta http-equiv = "X-UA-Tương thích" content = "IE = edge" & gt;
    & lt; meta name = "viewport" content = "width = device-width, initial-scale = 1.0" & gt;
    & lt; title & gt; Tài liệu & lt; / title & gt;
& lt; / head & gt;
& lt; body & gt;
    & lt; div style = "height: 1000px;" & gt; Div với chiều cao 1000px ... & lt; / div & gt;
    & lt; script src = "./ script.js" & gt; & lt; / script & gt;
& lt; / body & gt;
& lt; / html & gt;
 

Tại đây, chúng tôi có một tài liệu HTML. Bên trong thẻ body , chúng ta có phần tử div với một số văn bản và height 1000px . Có một lý do tại sao chúng tôi đã cung cấp nhiều chiều cao như vậy cho phần tử div này. Bằng cách cung cấp chiều cao lớn này cho div , chúng tôi sẽ nhận được một thanh cuộn bên trong trang web và điều này là cần thiết để minh họa cả hai cách theo dõi chuyển động của chuột ở trên.

Sau đó, chúng tôi có thẻ script liên kết đoạn script bên dưới với tài liệu HTML.

  function mousemove (event) {
    console.log ("pageX:", event.pageX,
    "pageY:", event.pageY,
    "clientX:", event.clientX,
    "clientY:", event.clientY)
}

window.addEventListener ('mousemove', mousemove);
 

Chúng tôi đã thêm sự kiện mousemove vào đối tượng window bằng cách sử dụng hàm addEventListener trong tệp script. Hàm này nhận hai tham số, tham số đầu tiên là sự kiện mà chúng ta muốn thêm vào. Tham số thứ hai là một hàm sẽ được thực thi sau khi sự kiện được kích hoạt.

Trong trường hợp này, chúng tôi đã tạo hàm mousemove () và chuyển nó dưới dạng một lệnh gọi lại người nghe sự kiện. Hàm này nhận event làm đối số. Biến event này sẽ cung cấp các vị trí x y được cập nhật của chuột. Bạn có thể đặt bất kỳ tên nào cho hàm mousemove () , nhưng bạn phải chuyển tên sự kiện chính xác cho trình xử lý sự kiện; nếu không, nó sẽ không hoạt động.

Bên trong hàm mousemove () , chúng ta chỉ có console.log () các giá trị chuột bằng cách sử dụng event.pageX , event.pageY event.clientX , event.clientY . Ảnh chụp màn hình bên dưới minh họa đầu ra của đoạn mã trên.

Khi xem đầu ra trong bảng điều khiển, bạn sẽ không thấy bất kỳ sự khác biệt nào khi pageX, clientX đang hiển thị các giá trị giống nhau và pageY clientY đang hiển thị các giá trị giống nhau. Chúng tôi chưa cuộn trang, vì vậy chúng tôi đang nhận được các giá trị tương tự.

Nếu bạn cuộn trang và sau đó kiểm tra các giá trị, sẽ có sự khác biệt trong các giá trị. Ảnh chụp màn hình bên dưới minh họa điều này.

Sau khi cuộn trang, các giá trị được cung cấp bởi các sự kiện pageX pageY lớn hơn so với những gì được cung cấp bởi các sự kiện clientX clientY . Điều này là do pageX pageY tính toán các giá trị x y từ đầu trang web, trong khi clientX clientY tính toán các giá trị dựa trên phần hiển thị của màn hình.

Sau này, bạn cũng có thể lấy các vị trí chuột này và áp dụng chúng vào phần tử HTML (bằng cách cập nhật các giá trị bên trái và trên cùng của phần tử) để con trỏ chuột di chuyển đến đâu thì phần tử đó cũng sẽ theo đó. Để đạt được điều này, bạn cũng phải sử dụng các sự kiện chuột khác.

Bây giờ, bạn có thể nhận được câu hỏi về việc sử dụng một trong những sự kiện chuột nào trong thực tế và câu trả lời cho điều này là tùy thuộc vào trường hợp sử dụng. Nếu bạn chỉ muốn theo dõi vị trí chuột trong vùng hiển thị của màn hình, hãy sử dụng clientX clientY . Nếu không, bạn có thể sử dụng các sự kiện chuột pageX pageY để tính toán vị trí chuột từ đầu trang web.

Viết cho chúng tôi

Các bài viết về DelftStack được viết bởi những người yêu thích phần mềm như bạn. Nếu bạn cũng muốn đóng góp cho DelftStack bằng cách viết các bài báo trả phí, bạn có thể xem trang viết cho chúng tôi .


Xem thêm những thông tin liên quan đến chủ đề javascript lấy vị trí chuột

JavaScript: Get Mouse Coordinates on Mouse Click

  • Tác giả: Crypters Infotech
  • Ngày đăng: 2014-11-09
  • Đánh giá: 4 ⭐ ( 6433 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: https://www.udemy.com/practical-javascript-javascript-basics/?couponCode=YouCust

    JavaScript: Get Mouse Coordinates on Mouse Click

    You can get the x and y coordinates of where you clicked on your screen using JavaScript. We use the event object to get clientX and clientY values. In this tutorial, we will move an image to the position where we click.

    https://www.udemy.com/practical-javascript-javascript-basics/?couponCode=YouCust

Cách lấy vị trí cuộn của một phần tử trong JavaScript

  • Tác giả: tech-wiki.online
  • Đánh giá: 4 ⭐ ( 5418 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

[Tự học Javascript] Di chuyển chuột: di chuột qua

  • Tác giả: cafedev.vn
  • Đánh giá: 4 ⭐ ( 3699 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hôm nay cafedev chia sẻ cho ace sâu vào chi tiết hơn về các sự kiện xảy ra khi chuột di chuyển giữa các phần tử.

Hướng dẫn và ví dụ Javascript MouseEvent

  • Tác giả: openplanning.net
  • Đánh giá: 5 ⭐ ( 7501 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Di Chuyển Đối Tượng Trên Web Con Trỏ Chuột trong JavaScript — JavaScript

  • Tác giả: www.stdio.vn
  • Đánh giá: 4 ⭐ ( 1388 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hướng dẫn sử dụng code JavaScript di chuyển các đối tượng trên web theo sự di chuyển của chuột.

Xin giúp lấy vị trị click chuột trên màn hình - Cộng đồng Java Việt Nam

  • Tác giả: www.congdongjava.com
  • Đánh giá: 5 ⭐ ( 8975 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hi ace,
    Tình hình là em muốn lấy vị trí click chuột trên màn hình desktop của máy tính nhưng mà em không tài nào xác định được tọa độ lấy được ví trí của...

Code chống copy và click chuột phải CSS & JavaScript

  • Tác giả: dnmtechs.com
  • Đánh giá: 4 ⭐ ( 2813 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  6 cách khai báo các hàm JavaScript - khai báo hàm trong js

By ads_php