Nhấp chuột phải vào một sự kiện javascript?

Menu chuột phải hay menu ngữ cảnh trong trình duyệt là menu có nhiều lựa chọn xuất hiện khi thao tác chuột phải. Nó cung cấp nhiều chức năng liên quan đến bối cảnh cụ thể đó. Đôi khi, chúng tôi muốn menu ngữ cảnh có nhiều tùy chọn hoặc tính năng hơn nhưng chúng tôi không thể sửa đổi menu ngữ cảnh mặc định. Vì vậy, chúng ta phải tạo một menu tùy chỉnh. Thêm menu ngữ cảnh tùy chỉnh vào trang web hoặc trang web của bạn làm cho nó trông tùy chỉnh hơn và phù hợp với ngữ cảnh hơn, đồng thời cho phép bạn tự do thêm các tính năng mong muốn vào đó

Nội dung chính Show

Nhấp chuột phải trong JavaScript là gì?
Làm cách nào để thêm sự kiện nhấp chuột phải vào JavaScript?
Nhấp chuột phải có phải là sự kiện chuột không?
Ví dụ về sự kiện JavaScript là gì?

Trong bài viết này, chúng tôi sẽ tạo một menu ngữ cảnh tùy chỉnh cho một trang web. Nó chủ yếu bao gồm hai bước

Ngăn menu ngữ cảnh mặc định bật lên khi nhấp vào nút chuột phải
Tạo menu ngữ cảnh tùy chỉnh của riêng chúng tôi bằng HTML và CSS và hiển thị nó khi nhấp chuột phải

Hãy để chúng tôi đi qua chúng một cách từng bước

Mã HTML. Đoạn mã HTML sau chỉ hiển thị trang HTML với menu mặc định được hiển thị trong sự kiện nhấp chuột phải

HTML

<html>

<body>

______1<0 <1____12<3>

<5<6

<8<0>

______1<0 <1____12<3>

<5html9

<5>1

<8<0>

<8body>

<8html>

Nếu chúng ta nhấp chuột phải vào trang này, menu mặc định sẽ bật lên

Mã JavaScript được sử dụng để chặn menu mặc định này và sau đó chúng tôi sẽ tạo menu ngữ cảnh tùy chỉnh của mình. Để chặn menu mặc định, chúng tôi sẽ thêm một trình xử lý sự kiện để xử lý các sự kiện nhấp chuột phải trên trang web. Chúng tôi sẽ sử dụng thuộc tính oncontextmenu để lắng nghe các sự kiện nhấp chuột phải

Chúng ta sẽ tạo một hàm rightClick(). Trong hàm này, chúng ta sẽ gọi phương thức preventDefault() của sự kiện nhấp chuột, phương thức này sẽ hủy hành vi mặc định của sự kiện nhấp chuột phải. Chúng ta cũng có thể trả về “false” để hủy sự kiện. Bây giờ, menu mặc định sẽ không bật lên khi nhấp chuột phải vào nút chuột

Mã HTML. Mã HTML sau minh họa cách ngăn sự kiện nhấp chuột phải mặc định

HTML

<html>

<body>

______1<0 <1____12<3>

<5<6

<8<0>

______1<0 <1____12<3>

<5html9

<5>1

<8<0>

______1 1 2<2 4>

<5 7

<5<0

<1<2

<1<4

<5<6

______18 1>

<8body>

<8html>

Menu mặc định bị chặn. Hãy để chúng tôi tạo menu ngữ cảnh tùy chỉnh của riêng mình. Menu ngữ cảnh chúng ta sẽ tạo sẽ là một danh sách HTML. Chúng tôi cũng sẽ thêm một số CSS để làm cho nó trông đẹp mắt

Chúng tôi đang tạo một danh sách không có thứ tự bên trong thẻ “div” với id và lớp. Thêm một số tùy chọn vào danh sách. Chúng tôi sẽ ẩn nó bằng cách đặt giá trị của thuộc tính “hiển thị” thành không

HTML

<<09 <10<2<12 <13<2<15

_______8____11____12____119>

____1<23>

<5<<27<28<29 <30<2<32<33<29<35<27>

<5<<27<28<29 <30<2<32<46<29<35<27>

<5<<27<28<29 <30<2<32<59<29<35<27>

<5<<27<28<29 <30<2<32<72<29<35<27>

<5<<27<28<29 <30<2<32<85<29<35<27>

<5<<27<28<29 <30<2<32<98<29<35<27>

<5<<27<28<29 <30<2<32html11<29<35<27>

<8<23>

<8<09>

Chúng tôi sẽ thêm một số mã JavaScript để hiển thị menu ngữ cảnh khi nhấp chuột phải. Chúng tôi cũng sẽ sửa đổi chức năng rightClick() để thêm chức năng hiển thị và ẩn menu trong các sự kiện nhấp chuột

Chúng tôi sẽ thêm một trình xử lý sự kiện cho sự kiện nhấp chuột và liên kết nó với hàm hideMenu() để nếu người dùng nhấp vào bất kỳ đâu trên trang và menu ngữ cảnh đã được hiển thị, nó sẽ ẩn đi. Ngoài ra, chúng ta phải đặt menu nơi nút bên phải được nhấp vào. Để làm điều này, chúng tôi sẽ sử dụng hai thuộc tính pageX và pageY của sự kiện nhấp chuột sẽ cung cấp cho chúng tôi tọa độ nơi nút phải được nhấp. Chúng tôi sẽ ẩn menu ngữ cảnh khi nhấp vào nút chuột nếu nó đã được hiển thị

mã JavaScript

HTML

<____81>

html27

html30

html32

<5html34

html35html36

<6

html41

<5html43

<5html46

html35html48

<1____250

<5html52

<1____254

<1____257

<1html59

<1____261

<5<6

<6

<8 1>

đầu ra. Đầu ra sau đây hiển thị menu ngữ cảnh tùy chỉnh xuất hiện khi nhấp chuột phải

Khi nhấp chuột phải, menu xuất hiện nhưng đây không phải là thứ chúng tôi muốn. Chúng tôi muốn nó xuất hiện ở nơi nút được nhấp và nó thực sự trông giống như một menu

mã CSS. Chúng tôi sẽ thêm một số thuộc tính CSS để định vị và tạo kiểu phù hợp cho menu

HTML

html69html70>

html73

<5html75____276html77html78

<5html80html76html82html78

<5html85____286

<5html88______276html90 html91 html92html78

<6

html98

<5>00____276>02html78

<5>05html76>02html78

<5>10____276>12html78

<5>15html76>17html78

<6

____323

<5>25html76>27html78

<5>30____276>27html78

<5html88______276html90 html91 html92html78

<6

___8>45

<5>47____276>17html78

<5>52html76html92html78

<6

>60

<5____285____363

<6

>66

mã cuối cùng. Sau đây là sự kết hợp của các đoạn mã trên

HTML

<html>

<____373>

____1<1 2<2html70>

<5html73

_______11____385

<1>87

<1>89

<1>91

<5<6

<5html98

<1>98

<1____400

_______11____402

_______11____404

<5<6

<5>23

_______11____411

_______11____413

<1>91

<5<6

<5____345

_______11____422

_______11____424

<5<6

<5____360

_______11____431

<5<6

____18<1>

_______18____373____3

<body>

______1<0 <1____12<3>

<5<6

<8<0>

______1<0 <1____12<3>

<5html9

<5>1

<8<0>

_______1<09 <10<2<12 <13<2<15

<5<1____12____487>

<5<<23>

<1<<27_______128<29 <30<2_______132<33<29<35<27>

<1<<27_______128<29 <30<2____132<46<29<35<27>

<1<<27_______128<29 <30<2______132<59<29<35<27>

<1<<27_______128<29 <30<2____132<72<29<35<27>

<1<<27_______128<29 <30<2____132<85<29<35<27>

<1<<27_______128<29 <30<2______132<98<29<35<27>

<1<<27_______128<29 <30<2____132html11<29<35<27>

<5<8<23>

<8<09>

____1 1>

<5html27

<5 7

<5html32

<1____605

html35body07

<5<6

<5html41

<1____243

<1body17

html35body19

html35html50

<1____623

html35body25

body26body27

body28

html35html57

html35html59

html35html61

<1<6

<5<6

______18 1>

<8body>

<8html>

Đầu ra.

Nhấp chuột phải vào một sự kiện javascript?

Đây là menu ngữ cảnh cơ bản mà chúng tôi đã tạo. Bạn có thể làm được nhiều hơn thế bằng cách thêm một số hiệu ứng di chuột thú vị, hiệu ứng đổ bóng, tô màu, đường viền, v.v.

Nhấp chuột phải trong JavaScript là gì?

"contextmenu" là một sự kiện như click, mouseup, mousemove, mousedown . Sự kiện "contextmenu" này thường được kích hoạt bằng cách nhấp vào nút chuột phải. Theo mặc định, nhấp chuột phải, bạn sẽ có các menu cắt, sao chép, dán, kiểm tra.

Làm cách nào để thêm sự kiện nhấp chuột phải vào JavaScript?

Chúng tôi sẽ sử dụng thuộc tính oncontextmenu để nghe các sự kiện nhấp chuột phải . Chúng ta sẽ tạo một hàm rightClick(). Trong hàm này, chúng ta sẽ gọi phương thức preventDefault() của sự kiện nhấp chuột, phương thức này sẽ hủy hành vi mặc định của sự kiện nhấp chuột phải.

Nhấp chuột phải có phải là sự kiện chuột không?

Thuộc tính nút MouseEvent được sử dụng để xác định các sự kiện nhấp chuột trái hoặc phải . Khi nhấp vào nút chuột, nó sẽ trả về một giá trị số nguyên mô tả nút chuột trái, phải hoặc giữa. Giá trị trả về. Sự kiện này trả về một giá trị số nguyên trên các sự kiện nhấp chuột là. 0. Nó chỉ ra nút chuột trái.

Ví dụ về sự kiện JavaScript là gì?

Tương tác của JavaScript với HTML được xử lý thông qua các sự kiện xảy ra khi người dùng hoặc trình duyệt thao tác trên một trang. Khi trang tải, nó được gọi là một sự kiện. Khi người dùng nhấp vào một nút, lần nhấp đó cũng là một sự kiện. Các ví dụ khác bao gồm các sự kiện như nhấn phím bất kỳ, đóng cửa sổ, thay đổi kích thước cửa sổ , v.v.

programming javascript

Nhấp chuột phải vào một sự kiện javascript?

HTML

HTML

HTML

HTML

HTML

HTML

Nhấp chuột phải trong JavaScript là gì?

Làm cách nào để thêm sự kiện nhấp chuột phải vào JavaScript?

Nhấp chuột phải có phải là sự kiện chuột không?

Ví dụ về sự kiện JavaScript là gì?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội