Preventdefault là gì

Mỗi sự kiện chúng ta có thể có nhiều hành động. Ví dụ bạn có một sự kiện là dịch Covid-19 thì bạn sẽ có các hành động trong sự kiện đó là đeo khẩu trang, làm remote, tự cách ly bản thân, …

Bạn đang xem: Preventdefault là gì

Khi ta thao tác với javascript nói chung và event trong Javascript nói riêng. Chúng ta thường hiểu và biết đến sự kiện là một hành vi nào đó ảnh hưởng tác động lên đối tượng người tiêu dùng HTML mà ta hoàn toàn có thể bắt được sự kiện này và triển khai các hành vi nào đó.

Preventdefault là gì

Bạn đang đọc: Preventdefault là gì

*Tóm TắtKhi viết hàm callback cho một sự kiện nào đó như click vào một button để ngăn trình duyệt không xử lý sự kiện click theo như mặc định thì thường tất cả chúng ta có các method để giải quyết và xử lý event sau khi giải quyết và xử lý callback xong. Chúng ta sẽ lướt qua xem chúng là gì nhé : Event. createEvent ( ) Tạo một sự kiện mới, sự kiện này sau đó phải được khởi tạo bằng cách gọi phương pháp initEvent ( ) của nó. Event. composedPath ( ) Trả về đường dẫn của sự kiện ( các đối tượng người dùng mà người nghe sẽ được gọi ). Điều này không gồm có các nodes trong shadow trees nếu shadow root được tạo bằng chính sách ShadowRoot. mode bị đóng. Event. initEvent ( ) Khởi tạo giá trị của một Sự kiện được tạo. Nếu sự kiện đã được gửi đi, chiêu thức này không có công dụng gì. Event. preventDefault ( ) Hủy sự kiện ( nếu hoàn toàn có thể hủy ). Event. stopImmediatePropagation ( ) Đối với sự kiện đơn cử này, hãy ngăn toàn bộ các người nghe khác được gọi. Điều này gồm có các trình nghe được gắn với cùng một thành phần cũng như các thành phần được gắn với các thành phần sẽ được duyệt qua sau Event. stopPropagation ( )

Ngừng truyền các sự kiện trong DOM.

Giác Ngộ Là Gì – Hiểu Mình Là Giác Ngộ

Nhưng ngày hôm nay tất cả chúng ta sẽ đi sâu vào 3 sự kiện chính hay sử dụng như tiêu đề bài viết có nhắc đến. 1. Event.preventDefault 1. Event. preventDefault*Nguồn ảnh : https://alligator.io/js/preventdefault/ Phương thức preventDefault ( ) của đối tượng người tiêu dùng event được sử dụng để ngăn ngừa cách giải quyết và xử lý mặc định của trình duyệt khi xảy ra sự kiện. Ví dụ đoạn mã sau : Trang chủ a hrefTrang chủscript typescriptthì khi người dùng nhấp vào link link trình duyệt sẽ hiển thị hộp thoại cảnh báo nhắc nhở với nội dung : Bạn nhấn vào link rồi Bạn nhấn vào link rồiđồng thời ngăn cản trình duyệt chuyển tiếp người dùng tới trang đích của link link. 2. Event.stopPropagation 2. Event. stopPropagation*Phương thức stopPropagation ( ) của đối tượng người dùng event được sử dụng để ngăn không cho sự kiện lan toả lên các thành phần mẹ của thành phần mà ở đó diễn ra sự kiện. Ví dụ với đoạn mã sau : Trang chủ Thì khi người dùng click vào thành phần p ( đồng thời cũng là click vào thành phần a chứa thành phần p ) thì trình duyệt sẽ hiển thị hộp thoại cảnh báo nhắc nhở với nội dung : Bạn đã nhấp vào phần tử p Bạn đã nhấp vào thành phần p

Tiếp theo, sử dụng event.stopPropagation() trong hàm callback xử lý sự kiện nhấp chuột vào thẻ p liên kết sẽ ngăn cản sự kiện này lan toả tới phần tử mẹ a. Do đó hàm parentEventHandler() sẽ không được gọi và sẽ không có hộp thoại cảnh báo nào khác được hiện ra.

Cơ Cấu Là Gì

Cuối cùng, vì trong hàm callback không sử dụng event. preventDefault ( ) nên sau đó trình duyệt vẫn sẽ chuyển người dùng tới trang chủ www.viblo.asia. 3. Event.stopImmediatePropagation 3. Event. stopImmediatePropagation

stopPropagation sẽ ngăn bất kỳ trình xử lý cha mẹ nào được thực thi stopImmediatePropagationsẽ ngăn bất kỳ trình xử lý cha mẹ nào và bất kỳ trình xử lý nào khác thực thi

Ví dụ với đoạn mã sau:

example Xử lý phía Javascript $(“p”).click(function(event) ); $(“p”).click(function(event) ); Event stopImmediatePropagation stopPropagation PreventDefault JavaScript

Chuyên mục: USD ( ” p ” ). click ( function ( event ) ) ; USD ( ” p ” ). click ( function ( event ) ) ; Event stopImmediatePropagation stopPropagation PreventDefault JavaScriptChuyên mục : Hỏi Đáp

0 Shares
Share
Tweet
Pin