Trong khi cập nhật một trang web hoặc trang web, có những trường hợp mà một số liên kết được bao gồm không còn cần thiết hoặc trở nên không liên quan. Thêm vào đó, quản lý lưu lượng truy cập của một trang web cụ thể một cách hiệu quả. Trong những trường hợp như vậy, việc hủy bỏ các sự kiện trong JavaScript thực sự kỳ diệu trong việc vô hiệu hóa một số chức năng và xử lý các tình huống trường hợp như vậy.
Làm thế nào để hủy bỏ sự kiện trong JavaScript?
Các phương pháp sau có thể được sử dụng để hủy các sự kiện trong JavaScript:
-
- “ ngăn chặn Mặc định() ' phương pháp.
- “ Giá trị Boolean ' cách tiếp cận.
- “ stopPropagation () ' phương pháp.
Phương pháp 1: Hủy bỏ sự kiện trong JavaScript bằng phương pháp ngăn chặn ()
Các ' ngăn chặn Mặc định() ”Phương thức hủy sự kiện đính kèm nếu nó có thể hủy. Phương pháp này có thể được sử dụng để tách sự kiện đính kèm khỏi liên kết được truy cập, do đó ngăn chặn hành động được thực hiện.
Cú pháp
event.preventDefault ( )
Trong cú pháp đã cho:
-
- “ Sự kiện ”Đề cập đến sự kiện được tách ra.
Thí dụ
Xem qua đoạn mã được cung cấp bên dưới:
< h3 > Sự kiện Click sẽ bị hủy ! h3 >
< một Tôi = 'Địa điểm' href = 'https://www.google.com/' > Truy cập trang web của Google một >
document.getElementById ( 'Địa điểm' ) .addEventListener ( 'nhấp chuột' , hàm số ( sự hủy bỏ ) {
hủy bỏ.preventDefault ( ) ;
} ) ;
Thực hiện theo các bước được nêu dưới đây:
-
- Đầu tiên, hãy bao gồm tiêu đề đã nêu sẽ được hiển thị trên Mô hình đối tượng tài liệu (DOM).
- Sau đó, chỉ định “ URL ' sử dụng ' href ' thuộc tính.
- Bây giờ, trong phần JavaScript của mã, hãy truy cập vào URL được chỉ định.
- Ngoài ra, hãy đính kèm “ nhấp chuột Sự kiện 'với URL với sự trợ giúp của một hàm sử dụng' addEventListener () ' phương pháp.
- Cuối cùng ' ngăn chặn Mặc định() ”Sẽ được áp dụng với sự trợ giúp của tham số của hàm để tách sự kiện đính kèm.
Đầu ra
Cách tiếp cận 2: Hủy sự kiện trong JavaScript bằng cách trả lại giá trị Boolean
Cách tiếp cận này có thể được thực hiện bằng cách trả về “ sai ”Giá trị boolean dựa trên sự kiện được kích hoạt.
Thí dụ
Các dòng mã sau đây thể hiện khái niệm đã nêu:
< trung tâm > < đầu vào loại hình = 'chữ' trình giữ chỗ = 'Nhập văn bản' oninput = 'hủyEvent ()' > trung tâm >hàm số hủy bỏ ( ) {
trở về sai ;
báo động ( 'Câu lệnh này sẽ không được hiển thị' )
}
Trong đoạn mã trên:
-
- Đầu tiên, trong “
”, Phân bổ một trường văn bản đầu vào. - Ngoài ra, hãy đính kèm một “ oninput Sự kiện 'với' trình giữ chỗ ' giá trị. Điều này sẽ dẫn đến việc gọi hàm được chỉ định khi nhập văn bản.
- Bây giờ, trong phần JavaScript của mã, hãy khai báo một hàm có tên là “ hủyEvent () ”. Theo định nghĩa của nó, trả về giá trị boolean “ sai ”Để hủy bỏ“ Sự kiện ”.
- Cuối cùng, chỉ định thông báo đã nêu trong hộp cảnh báo. Giá trị boolean được trả về sẽ dẫn đến việc tránh hiển thị hộp thoại.
- Đầu tiên, trong “
Đầu ra
Trong kết quả đầu ra ở trên, có thể quan sát thấy rằng khi chức năng được truy cập, hộp thoại cảnh báo không được hiển thị do đó hủy sự kiện đính kèm.
Cách tiếp cận 3: Hủy sự kiện trong JavaScript bằng phương pháp stopPropagation ()
Các ' stopPropagation () ”Phương pháp ngăn không cho cùng một sự kiện được truyền bá. Phương pháp này có thể được sử dụng để ngừng lan truyền giữa hai div khi chọn hộp kiểm.
Cú pháp
event.stopPropagation ( )
Thí dụ
Quan sát các dòng mã sau:
< trung tâm > < h3 > Nhấp vào Trang web để quan sát sự thay đổi: h3 >< div trong một cái nhấp chuột = 'element2 ()' > Linux
< div trong một cái nhấp chuột = 'element1 (event)' > Trang mạng div >
div >
< br >
Kiểm tra để Ngừng Truyền bá:
< đầu vào loại hình = 'hộp kiểm' Tôi = 'kiểm tra' >
trung tâm >
-
- Tương tự, trong bước đầu tiên, hãy bao gồm tiêu đề đã nêu.
- Bây giờ, hãy bao gồm hai “ div Các thẻ 'có đính kèm' trong một cái nhấp chuột ”Các sự kiện với mỗi sự kiện trong số chúng gọi hai hàm khác nhau element2 () và element1 ().
- Ngoài ra, hãy bao gồm một hộp kiểm với id được chỉ định. Hộp kiểm này sẽ dẫn đến việc ngừng truyền giữa hai div.
Bây giờ, hãy xem các dòng mã JavaScript sau:
hàm số phần tử1 ( và ) {báo động ( 'Trang web bạn đã nhấp' ) ;
nếu ( document.getElementById ( 'kiểm tra' ) .đã kiểm tra ) {
e.stopPropagation ( ) ;
}
}
hàm số phần tử2 ( ) {
báo động ( 'Bạn đã nhấp vào Linuxhint' ) ;
}
Trong đoạn mã js trên:
-
- Xác định một chức năng có tên là “ element1 () ”. Đây, tham số “ và 'Đề cập đến' Sự kiện ”Đang được kích hoạt được chỉ định trong phần HTML của mã.
- Theo định nghĩa của nó, hiển thị hộp thoại cảnh báo có thông báo đã nêu.
- Sau đó, truy cập hộp kiểm đã tạo theo id của nó bằng cách sử dụng “ getElementById () ' phương pháp. Ngoài ra, hãy áp dụng “ đã kiểm tra ”Thuộc tính của nó để kiểm tra tình trạng của hộp kiểm đã chọn.
- Sau đó, áp dụng “ stopPropagation () 'Phương thức tham chiếu đến tham số' và ”. Điều này sẽ dẫn đến việc ngừng truyền từ chức năng này sang chức năng khác.
- Tương tự, hãy xác định một chức năng khác “ element2 () ”Để được tuyên truyền. Chức năng này sẽ chỉ hoạt động trước khi lan truyền.
Đầu ra
Tại đây, quan sát hành vi khi nhấp vào div khi chọn hộp kiểm.
Chúng tôi đã biên soạn các cách tiếp cận để hủy các sự kiện trong JavaScript.
Sự kết luận
Các ' ngăn chặn Mặc định() Phương pháp ' giá trị boolean Phương pháp tiếp cận 'hoặc' stopPropagation () ”Có thể được sử dụng để hủy bỏ các sự kiện trong JavaScript. Phương pháp đầu tiên có thể được thực hiện để tách sự kiện đính kèm dẫn đến việc vô hiệu hóa liên kết. Phương pháp giá trị boolean trả về “ sai ”Giá trị boolean dựa trên sự kiện được kích hoạt. Phương thức stopPropagation () có thể được áp dụng để ngừng truyền giữa hai div với sự trợ giúp của hộp kiểm đi kèm. Hướng dẫn này giải thích để hủy các sự kiện trong JavaScript.