- vừa được xem lúc

Tìm hiểu về Event.preventDefault(), Event.stopPropagation() và Event.stopImmediatePropagation()

0 0 50

Người đăng: Son Le Quang

Theo Viblo Asia

Chúng ta thương thấy 3 method này và có thể dẫn dến bối rối và nhầm lẫn giữa chúng:

  • Event.preventDefault()
  • Event.stopPropagation()
  • Event.stopImmediatePropagation()

Tóm tắt

Đầu tiên hãy xem tóm tắt tại MDN nhé ?

  • preventDefault: Huỷ bỏ event nếu nó có thể huỷ mà không dừng sự lan rộng(propagation) của event tới phần khác.
  • stopPropagation Ngăn chặn sự lan rộng của sự kiện hiện tại tới thằng khác.
  • stopImmediatePropagation ngăn chặn những listeners cũng đang đang lắng nghe cùng event được gọi.

Event.preventDefault

Hãy nhìn vào mãi ví dụ ở dưới. Chúng ta sẽ thấy việc click vào submit button trên form sẽ gửi nội dung của form tới chỗ xử lý. Event.preventDefault là cách hoàn hảo để không cho gửi form khi nhấn vào button submit.

<form id="myForm" action="/my-handling-form-page" method="post"> <div> <label for="name">Name:</label> <input type="text" id="name" /> </div> <div> <label for="mail">E-mail:</label> <input type="email" id="mail" /> </div> <div> <label for="msg">Message:</label> <textarea id="msg"></textarea> </div> <div class="button"> <button type="submit">Send your message</button> </div>
</form>
 $('#myForm').on('submit', function(e) { e.preventDefault(); // Now nothing will happen
});

Event.preventDefault sẽ đảm bảo rằng form không bao giờ được gửi, và nó đã giành được quyền kiểm soát và ngăn chặn sự kiện đó khi click. Đó là những gì chúng ta đã làm.

Event.stopPropagation

stopPropagation để đảm bảo chắc chắn rằng event không lan rộng nữa. Hãy xem ví dụ ở dưới:

<div class="container"> <a href="#" class="element">Click Me!</a>
</div>
$('.container').on('click', function(e) { console.log('container was clicked');
}); $('.element').on('click', function(e) { e.preventDefault(); // Now link won't go anywhere console.log('element was clicked');
});

Bây giờ nếu bạn click link và trước đó đã mở console bạn sẽ thấy:

 "element was clicked" "container was clicked"

Bây giờ hãy thêm Event.stopPropagation:

 $('.container').on('click', function(e) { console.log('container was clicked');
}); $('.element').on('click', function(e) { e.preventDefault(); // Now link won't go anywhere e.stopPropagation(); // Now the event won't bubble up console.log('element was clicked');
});

Và click lại. Đây sẽ là cái bạn thấy:

 "element was clicked"

Event.stopImmediatePropagation

Với 2 methods ở trên đã giúp bạn khoảng 90% các trường hợp cần thiết phải xử lí với events. Nhưng hãy tìm hiểu tiếp mothod cuối này nhé ?.

Chúng ta sẽ bắt đầu với markup tương tự ở trên, và thêm vào một class. Một cái là item mà tất cả các anchors sẽ nhận, và một cái riêng chỉ cho markup ở đây. Nó rất quan trọng để giúp code ví dụ này hoặt động.

 <div class="container"> <a href="#" class="item element">Click Me!</a> </div>

Và chúng sẽ thêm Event.stopPropagation mothod mà chúng ta đã tìm hiểu ở phần trước.

$('.item').on('click', function(e) { console.log('an item was clicked');
}); $('.element').on('click', function(e) { e.preventDefault(); // Now link won't go anywhere e.stopPropagation(); // Now the event won't bubble up console.log('element was clicked');
});

Bây giờ hãy hãy xem có gì ở console khi click nhé.

"an item was clicked"
"element was clicked"

Vấn đề ở đây là .item và .element được xếp đồng hạng trên DOM. Nó không lan tràn lên phần tử trên như ví dụ trước đó. Và vì khi click cả 2 action gắn trên .element và .item sẽ chạy cùng lúc, bạn không thể dừng lan rộng(propagation) như bạn mong muốn.

Đây chính là cơ hội để xử dụng stopImmediatePropagation!

$('.element').on('click', function(e) { e.preventDefault(); // Now link won't go anywhere e.stopImmediatePropagation(); // Now item on click won't fire console.log('element was clicked');
}); $('.item').on('click', function(e) { console.log('an item was clicked');
});

Điêu quan trọng ở đây để ngăn chặn sự lan rộng tới cùng hạng của event trong DOM là đặt stopImmediatePropagation ở ngay khai báo lệnh đầu tiên về action lắng nghe event click trong code của bạn. Như ở dây là chuyển các method từ .item lên .element.

Và thành của của chúng ta đây:

"element was clicked"

Bài tham khảo

Bình luận

Bài viết tương tự

- vừa được xem lúc

Giới thiệu Typescript - Sự khác nhau giữa Typescript và Javascript

Typescript là gì. TypeScript là một ngôn ngữ giúp cung cấp quy mô lớn hơn so với JavaScript.

0 0 525

- vừa được xem lúc

Cài đặt WSL / WSL2 trên Windows 10 để code như trên Ubuntu

Sau vài ba năm mình chuyển qua code trên Ubuntu thì thật không thể phủ nhận rằng mình đã yêu em nó. Cá nhân mình sử dụng Ubuntu để code web thì thật là tuyệt vời.

0 0 398

- vừa được xem lúc

Đặt tên commit message sao cho "tình nghĩa anh em chắc chắn bền lâu"????

. Lời mở đầu. .

1 1 741

- vừa được xem lúc

Tìm hiểu về Resource Controller trong Laravel

Giới thiệu. Trong laravel, việc sử dụng các route post, get, group để gọi đến 1 action của Controller đã là quá quen đối với các bạn sử dụng framework này.

0 0 361

- vừa được xem lúc

Phân quyền đơn giản với package Laravel permission

Như các bạn đã biết, phân quyền trong một ứng dụng là một phần không thể thiếu trong việc phát triển phần mềm, dù đó là ứng dụng web hay là mobile. Vậy nên, hôm nay mình sẽ giới thiệu một package có thể giúp các bạn phân quyền nhanh và đơn giản trong một website được viết bằng PHP với framework là L

0 0 452

- vừa được xem lúc

Bạn đã biết các tips này khi làm việc với chuỗi trong JavaScript chưa ?

Hi xin chào các bạn, tiếp tục chuỗi chủ đề về cái thằng JavaScript này, hôm nay mình sẽ giới thiệu cho các bạn một số thủ thuật hay ho khi làm việc với chuỗi trong JavaScript có thể bạn đã hoặc chưa từng dùng. Cụ thể như nào thì hãy cùng mình tìm hiểu trong bài viết này nhé (go).

0 0 435