Hướng dẫn disable click css - vô hiệu hóa nhấp chuột css

Các nút thường được sử dụng để thực hiện một hành động cụ thể. Chẳng hạn, khi bạn nhấp vào nút được thêm vào, nó sẽ kích hoạt một sự kiện nhất định. CSS cho phép chúng tôi vô hiệu hóa sự kiện nhấp chuột. Vì vậy, nếu bạn muốn vô hiệu hóa sự kiện nhấp chuột, hãy thêm một sự kiện con trỏ trong CSS và đặt giá trị của nó theo các yêu cầu.

Trong bài viết này, chúng tôi sẽ học cách vô hiệu hóa sự kiện nhấp chuột bằng CSS.

Vì vậy, hãy để bắt đầu!

Bạn có thể vô hiệu hóa các sự kiện nhấp chuột bằng thuộc tính CSS Pin Pinter-Events. Nhưng, nhảy vào nó, chúng tôi sẽ giải thích ngắn gọn cho bạn.pointer-events” property. But, jumping into it, we will briefly explain it to you.

Tài sản của CSS Pinter-Events là gì?

Các sự kiện con trỏ của người Viking kiểm soát cách các phần tử HTML phản ứng hoặc cư xử với sự kiện cảm ứng, chẳng hạn như nhấp vào hoặc nhấn các sự kiện, trạng thái hoạt động hoặc di chuột và liệu con trỏ có thể nhìn thấy hay không.pointer-events” control how the HTML elements respond or behave to the touch event, such as click or tap events, active or hover states, and whether the cursor is visible or not.

Cú pháp cú pháp của các sự kiện con trỏ như sau:
The syntax of pointer-events is as follows:

Sự kiện con trỏ: Tự động | Không có;: auto|none;

Thuộc tính đề cập ở trên có hai giá trị, chẳng hạn như Aut Auto, và không có ai.auto” and “none”:

• Tự động: Nó được sử dụng để thực hiện các sự kiện mặc định.It is used to perform default events.
• Không: Nó được sử dụng để vô hiệu hóa các sự kiện.It is utilized to disable events.

Lưu ý: Ví dụ dưới đây sẽ trước tiên sẽ trình bày cách thêm hai nút hoạt động và sau đó chúng tôi sẽ vô hiệu hóa sự kiện nhấp chuột của nút thứ hai.

Ví dụ 1: Vô hiệu hóa Nhấp vào sự kiện của các nút bằng CSSIN Ví dụ này, chúng tôi sẽ tạo một tiêu đề và hai nút. Tiếp theo, chỉ định nút Nút trực tuyến là tên lớp của nút thứ nhất và gán nút nút và nút và nút2 Nút2 là các lớp của nút thứ hai.
In this example, we will create a heading

and two buttons. Next, specify the “button” as the class name of the first button, and assign “button” and “button2” as the classes of the second button. (adsbygoogle = window.adsbygoogle || []).push({}); HTMLTrong CSS, Hồi .Button, được sử dụng để truy cập cả hai nút được tạo trong tệp HTML. Tiếp theo, đặt phong cách biên giới là không có ai và đưa ra phần đệm như là 25px. Sau đó, đặt màu của văn bản nút là RG RGB (29, 6, 31) và nền nút như là RGB (19, 192, 163). Chúng tôi cũng sẽ đặt bán kính của một nút dưới dạng 5px..button” is used to access both buttons created in the HTML file. Next, set the border style as “none” and give padding as “25px”. After that, set the color of the button text as “rgb(29, 6, 31)” and the button background as “rgb(19, 192, 163)”. We will also set the radius of a button as “5px”.CSS.Button {& nbsp; Biên giới: Không có; & nbsp; Đệm: 25px; & nbsp; Màu sắc: RGB (29,6,31); & nbsp; Màu nền: RGB (19.192.163); & nbsp; Biên giới-Radius: 5px; & nbsp;}{   border: none;   padding: 25px;   color: rgb(29, 6, 31);   background-color: rgb(19, 192, 163);   border-radius: 5px;  }Sau đó, chúng tôi sẽ áp dụng: Class Pseudo Active trên cả hai nút dưới dạng..button:active” and set the color of the button as “rgb(200, 255, 0)”:.Button: Active {& nbsp; Màu nền: RGB (209,65,65); & nbsp;}:active{   background-color: rgb(209, 65, 65);  }Kết quả là, bạn sẽ thấy kết quả sau:Bây giờ, chúng tôi sẽ chuyển sang phần tiếp theo trong đó chúng tôi sẽ vô hiệu hóa sự kiện nhấp cho nút thứ hai.Để làm như vậy, hãy sử dụng..button2” to access the second button, created in the HTML file, and after that, set the value of the pointer-events property as “none”: (adsbygoogle = window.adsbygoogle || []).push({}); .Button2 {& nbsp; Confinter-Events: Không có; & nbsp;}{   pointer-events: none;  }Sử dụng thuộc tính Events Con trỏ và đặt giá trị của nó thành Non sẽ vô hiệu hóa sự kiện nhấp chuột, có thể thấy trong đầu ra sau:Chúng tôi đã cung cấp phương pháp dễ nhất để vô hiệu hóa sự kiện nhấp chuột bằng CSS.Sự kết luận

Để vô hiệu hóa sự kiện nhấp chuột trong HTML, thuộc tính CSS của CSS Con trỏ của CSS được sử dụng. Với mục đích này, hãy thêm phần tử HTML và đặt giá trị của thuộc tính Events Con trỏ là không có gì để vô hiệu hóa sự kiện nhấp chuột của nó. Bài viết này đã giải thích cách vô hiệu hóa sự kiện nhấp chuột bằng CSS cùng với ví dụ của nó.pointer-events” property of CSS is used. For this purpose, add an HTML element and set the value of the pointer-events property as “none” to disable its click event. This article explained how to disable the click event using CSS along with its example.