Bạn đang xem : sự kiện cuộn chuột trong javascript

Trong chương này, chúng ta sẽ đi sâu vào chi tiết hơn về các sự kiện chuột và thuộc tính của chúng.

Xin lưu ý: những sự kiện như vậy có thể không chỉ đến từ “thiết bị chuột” mà còn từ các thiết bị khác, chẳng hạn như điện thoại và máy tính bảng, nơi chúng được mô phỏng để tương thích.

Chúng tôi đã thấy một số sự kiện sau:

mousedown / mouseup
Nút chuột được nhấp / thả trên một phần tử.
mouseover / mouseout
Con trỏ chuột đi qua / đi ra từ một phần tử.
di chuột
Mỗi lần di chuột qua một phần tử sẽ kích hoạt sự kiện đó.
nhấp vào
Kích hoạt sau mousedown và sau đó mouseup trên cùng một phần tử nếu nút chuột trái được sử dụng.
dblclick
Kích hoạt sau hai lần nhấp vào cùng một phần tử trong một khung thời gian ngắn. Ngày nay hiếm khi được sử dụng.
contextmenu
Kích hoạt khi nhấn nút chuột phải. Có những cách khác để mở menu ngữ cảnh, ví dụ: bằng cách sử dụng một phím bàn phím đặc biệt, nó cũng kích hoạt trong trường hợp đó, vì vậy nó không chính xác là sự kiện chuột.

… Ngoài ra còn có một số sự kiện khác, chúng tôi sẽ đề cập đến chúng sau.

Như bạn có thể thấy từ danh sách trên, một hành động của người dùng có thể kích hoạt nhiều sự kiện.

Ví dụ: lần nhấp chuột trái đầu tiên sẽ kích hoạt mousedown , khi nút được nhấn, sau đó mouseup nhấp khi nút được phát hành.

Trong trường hợp một hành động khởi tạo nhiều sự kiện, thứ tự của chúng sẽ được cố định. Nghĩa là, các trình xử lý được gọi theo thứ tự mousedown mouseup click .

Nhấp vào nút bên dưới và bạn sẽ thấy các sự kiện. Hãy thử nhấp đúp.

Trên quầy thử nghiệm bên dưới, tất cả các sự kiện chuột đều được ghi lại và nếu có thời gian trễ hơn 1 giây giữa chúng, chúng sẽ được phân tách bằng quy tắc ngang.

Ngoài ra, chúng ta có thể thấy thuộc tính button cho phép chúng ta phát hiện nút chuột; nó được giải thích bên dưới.

Các sự kiện liên quan đến nhấp chuột luôn có thuộc tính button , cho phép sử dụng nút chuột chính xác.

Chúng tôi thường không sử dụng nó cho các sự kiện click contextmenu , vì sự kiện trước chỉ xảy ra khi nhấp chuột trái và sự kiện sau – chỉ khi nhấp chuột phải.

Mặt khác, các trình xử lý mousedown mouseup có thể cần event.button , vì những sự kiện này kích hoạt trên bất kỳ nút nào, vì vậy nút cho phép phân biệt giữa “chuyển xuống bên phải” và “chuyển xuống bên trái”.

Các giá trị có thể có của event.button là:

Trạng thái nút
event.button

Nút trái (chính)

Nút giữa (phụ)
1

Nút phải (phụ)
2

Nút X1 (quay lại)
3

Nút X2 (chuyển tiếp)
4

Xem Thêm  Kiểu HTML - CSS - html style css class

Hầu hết các thiết bị chuột chỉ có nút trái và phải, vì vậy các giá trị có thể là 0 hoặc 2 . Các thiết bị cảm ứng cũng tạo ra các sự kiện tương tự khi một người chạm vào chúng.

Ngoài ra, còn có thuộc tính event.buttons có tất cả các nút hiện được nhấn dưới dạng số nguyên, một bit trên mỗi nút. Trên thực tế, thuộc tính này rất hiếm khi được sử dụng, bạn có thể tìm thông tin chi tiết tại MDN nếu cần.

event.which

đã lỗi thời

Mã cũ có thể sử dụng thuộc tính event.which , đây là một cách cũ không chuẩn để lấy nút, với các giá trị có thể có:

  • event.which == 1 – nút bên trái,
  • event.which == 2 – nút giữa,
  • event.which == 3 – nút bên phải.

Hiện tại, event.which không được dùng nữa, chúng tôi không nên sử dụng nó.

Tất cả các sự kiện chuột bao gồm thông tin về các phím bổ trợ được nhấn.

Thuộc tính sự kiện:

  • shiftKey : Shift
  • altKey : Alt (hoặc Opt cho Mac)
  • ctrlKey : Ctrl
  • metaKey : Cmd dành cho Mac

Chúng là true nếu phím tương ứng được nhấn trong sự kiện.

Ví dụ: nút bên dưới chỉ hoạt động khi Alt + Shift + nhấp chuột:

  & lt; button id = "button" & gt; Alt + Shift + Nhấp vào tôi! & lt; / button & gt;

& lt; script & gt;
  button.onclick = function (event) {
    if (event.altKey & amp; & amp; event.shiftKey) {
      alert ('Hoan hô!');
    }
  };
& lt; / script & gt;  

Chú ý: trên Mac thường Cmd thay vì Ctrl

Trên Windows và Linux có các phím bổ trợ Alt, Shift và Ctrl. Trên Mac, có một tính năng khác: Cmd, tương ứng với thuộc tính metaKey .

Trong hầu hết các ứng dụng, khi Windows / Linux sử dụng Ctrl, trên Mac Cmd được sử dụng.

Đó là: khi người dùng Windows nhấn Ctrl + Enter hoặc Ctrl + A, người dùng Mac sẽ nhấn Cmd + Enter hoặc Cmd + A, v.v.

Vì vậy, nếu chúng ta muốn hỗ trợ các kết hợp như Ctrl + click, thì đối với Mac, sử dụng Cmd + click là hợp lý. Điều đó thoải mái hơn cho người dùng Mac.

Ngay cả khi chúng tôi muốn buộc người dùng Mac phải Ctrl + nhấp – điều đó khá khó. Vấn đề là: nhấp chuột trái bằng Ctrl được hiểu là nhấp chuột phải vào MacOS và nó tạo ra sự kiện contextmenu , không phải nhấp như Windows / Linux.

Vì vậy, nếu chúng ta muốn người dùng của tất cả các hệ điều hành cảm thấy thoải mái, thì cùng với ctrlKey , chúng ta nên kiểm tra metaKey .

Đối với mã JS, điều đó có nghĩa là chúng ta nên kiểm tra if (event.ctrlKey || event.metaKey) .

Ngoài ra còn có thiết bị di động

Các tổ hợp bàn phím tốt như là một bổ sung cho quy trình làm việc. Vì vậy, nếu khách truy cập sử dụng bàn phím – bàn phím sẽ hoạt động.

Nhưng nếu thiết bị của họ không có – thì sẽ có cách để tồn tại mà không có phím bổ trợ.

Tất cả các sự kiện chuột cung cấp tọa độ theo hai hướng:

  1. Cửa sổ tương đối: clientX clientY .
  2. Tài liệu tương đối: pageX pageY .

Chúng tôi đã đề cập đến sự khác biệt giữa chúng trong chương Tọa độ .

Xem Thêm  Node.js và Raspberry Pi - cài đặt node.js trên raspberry pi

Tóm lại, tọa độ tài liệu-tương đối pageX / Y được tính từ góc trên bên trái của tài liệu và không thay đổi khi trang được cuộn, trong khi clientX / Y < / code> được tính từ góc trên bên trái của cửa sổ hiện tại. Khi trang được cuộn, chúng sẽ thay đổi.

Ví dụ: nếu chúng ta có một cửa sổ có kích thước 500x500 và chuột ở góc trên bên trái, thì clientX clientY 0 , bất kể trang được cuộn như thế nào.

Và nếu con chuột ở giữa, thì clientX clientY 250 , bất kể nó ở vị trí nào trong tài liệu. Chúng tương tự như position: fixed ở khía cạnh đó.

Di chuyển chuột qua trường nhập liệu để xem clientX / clientY (ví dụ nằm trong iframe , vì vậy tọa độ có liên quan đến iframe ):

  & lt; input onmousemove = "this.value = event.clientX + ':' + event.clientY" value = "Di chuột qua tôi" & gt;  

Nhấp đúp chuột có một tác dụng phụ có thể gây khó chịu trong một số giao diện: nó chọn văn bản.

Ví dụ: nhấp đúp vào văn bản bên dưới để chọn nó cùng với trình xử lý của chúng tôi:

  & lt; span ondblclick = "alert ('dblclick')" & gt; Nhấp đúp vào tôi & lt; / span & gt;  

Nếu một người nhấn nút chuột trái và không nhả chuột, di chuyển chuột, điều này cũng làm cho lựa chọn, thường là không mong muốn.

Có nhiều cách để ngăn lựa chọn mà bạn có thể đọc trong chương Lựa chọn và Phạm vi .

Trong trường hợp cụ thể này, cách hợp lý nhất là ngăn hành động của trình duyệt trên mousedown . Nó ngăn cả hai lựa chọn này:

  Trước ...
& lt; b ondblclick = "alert ('Nhấp!')" onmousedown = "return false" & gt;
  Bấm đúp vào tôi
& lt; / b & gt;
... Sau  

Giờ đây, phần tử in đậm không được chọn khi nhấp đúp và nhấn nút bên trái trên phần tử đó sẽ không bắt đầu lựa chọn.

Xin lưu ý: văn bản bên trong nó vẫn có thể chọn được. Tuy nhiên, lựa chọn không nên bắt đầu trên chính văn bản, mà trước hoặc sau nó. Thông thường, điều đó tốt cho người dùng.

Ngăn sao chép

Nếu chúng tôi muốn tắt tính năng chọn để bảo vệ nội dung trang của mình khỏi bị sao chép, thì chúng tôi có thể sử dụng một sự kiện khác: oncopy .

  & lt; div oncopy = "alert ('Cấm sao chép!'); return false" & gt;
  Người dùng thân mến,
  Việc sao chép bị cấm đối với bạn.
  Nếu bạn biết JS hoặc HTML, thì bạn có thể lấy mọi thứ từ nguồn trang.
& lt; / div & gt;  

Nếu bạn cố gắng sao chép một đoạn văn bản trong & lt; div & gt; , thao tác này sẽ không hoạt động vì tác vụ mặc định oncopy bị ngăn cản.

Chắc chắn người dùng có quyền truy cập vào nguồn HTML của trang và có thể lấy nội dung từ đó, nhưng không phải ai cũng biết cách thực hiện.

Sự kiện chuột có các thuộc tính sau:

  • Nút: button .

  • Các phím bổ trợ ( true nếu được nhấn): altKey , ctrlKey , shiftKey metaKey < / code> (Mac).

    • Nếu bạn muốn xử lý Ctrl, thì đừng quên người dùng Mac, họ thường sử dụng Cmd, vì vậy tốt hơn nên kiểm tra if (e.metaKey || e.ctrlKey) .
  • Tọa độ tương đối giữa cửa sổ: clientX / clientY .

  • Tọa độ tài liệu-tương đối: pageX / pageY .

Hành động trình duyệt mặc định của mousedown là lựa chọn văn bản, nếu nó không tốt cho giao diện thì nên ngăn chặn hành động đó.

Trong chương tiếp theo, chúng ta sẽ xem thêm thông tin chi tiết về các sự kiện theo sau chuyển động của con trỏ và cách theo dõi các thay đổi của phần tử trong đó.


Xem thêm những thông tin liên quan đến chủ đề sự kiện cuộn chuột javascript

JavaScript - Mouse Events

  • Tác giả: EdYoda
  • Ngày đăng: 2020-02-28
  • Đánh giá: 4 ⭐ ( 6703 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: For more courses, visit: https://www.edyoda.com/

    Hey guys, in this video we will learn about Mouse Events

    Event References: https://developer.mozilla.org/en-US/docs/Web/Events
    My Twitter Handle: @qaifikhan

Bài tập javascript 8 – Bắt sự kiện cuộn chuột và xử lý hiệu ứng

  • Tác giả: nguyenvanhieu.vn
  • Đánh giá: 4 ⭐ ( 6499 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Ở bài tập javascript 8 này, mình và các bạn sẽ xử lý hiệu ứng khi cuộn chuột, ngoài click chuột thì sự kiện scroll cũng được dùng để xử lý ..

Sự kiện chuột

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

Sự kiện (Event) trong JavaScript

  • Tác giả: vietjack.com
  • Đánh giá: 5 ⭐ ( 9604 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Sự kiện (Event) trong JavaScript - Học Javascript cơ bản và nâng cao cho người mới học từ Cú pháp Đối tượng Syntax Objects Form Validations Cookies Regular Expressions Literals Biến Hàm Phương thức Variables Vòng lặp Loops Điều kiện Conditions.

[Tự học Javascript] Sự kiện chuột trong Javascript

  • Tác giả: cafedev.vn
  • Đánh giá: 3 ⭐ ( 1445 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong chương này, cafedev sẽ đi vào chi tiết hơn về các sự kiện chuột và thuộc tính của chúng.

Tìm hiểu sự kiện trong javascript

  • Tác giả: viblo.asia
  • Đánh giá: 5 ⭐ ( 6352 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Mở đầu Khi làm việc với javascript thì chắc hẳn bạn phải làm quen với sự kiện (event). Vậy sự kiện là gì? Và tác dụng của sự kiện là như thế nào?

Cách dùng sự kiện hover chuột trong Javascript

  • Tác giả: freetuts.net
  • Đánh giá: 5 ⭐ ( 2795 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Sự kiện hover chuột trong Javascript, thêm hover event javascript bằng hai cách - thêm trực tiếp trong thẻ html và cách hai là thêm thông qua DOM JS

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

By ads_php