Sử dụng hàm preventDefault và stopPropagation trong jQuery

Một lỗi rất hay gặp phải đó là chúng ta vẫn thường sử dụng return false; trong hàm bắt sự kiện để chặn hành động mặc định của sự kiện đó hoặc ngăn chăn nổi bong bóng sự kiện lên element ở cấp cao hơn.

Ví dụ: Mình có đoạn HTML sau

<ul>
	<li><a href="http://cunghocweb.com">Cunghocweb.com</a></li>
	<li><a href="http://thenao.com">Thenao.com</a></li>
	<li><a href="http://kulerthemes.com">Kulerthemes.com</a></li>
</ul>

Bây giờ, mình muốn khi người dùng nhấn vào thẻ a trong từng thẻ li đó thì sẽ hiện ra thông báo về nội dung trong thẻ a đó, thay vì trình duyệt sẽ tự động chuyển về website mới khi thẻ a được nhấn. Nhưng mình cũng muốn khi người dùng click vào thẻ ul sẽ hiện ra một thông báo ‘Chào mừng bạn đến với Cunghocweb.com’ chẳng hạn. Chúng ta cũng xem qua đoạn code dưới đây:

$('ul a').click(function (){
	alert($(this).text())
	return false;
});

$('ul').click(function () {
    alert('Chào mừng bạn đến với Cunghocweb.com');
});

Nhưng có một vấn đề là bây giờ mình muốn khi thẻ a được nhấn thì nó sẽ truyền sự kiện đến thẻ ul chứa nó thì không thể được. Vì return false; trong hàm bắt sự kiện của thẻ a đã ngừng nổi bong bóng sự kiện lên thẻ ul.

Bạn có thể thử trên jsfiddle

Để giải quyết được vấn đề này chúng ta hãy cùng tìm hiển về hai hàm preventDefault và stopPropagation của đối tượng sự kiện do jQuery cung cấp.

• preventDefault dùng để chặn hành động mặc định của sự kiện, ví dụ như khi ta bấm vào thẻ a thì trình duyệt sẽ chuyển sang trang mới hoặc gửi nội dung của input khi form xảy ra sự kiện submit…
• stopPropagation dùng để ngăn nổi bong bóng sự kiện từ một element con lên element ở cấp cao hơn.

Bây giờ, chúng ta có sử dụng preventDefault để giải quyết vấn đề vừa gặp.

$('ul a').click(function (evt){
	alert($(this).text())
	evt.preventDefault();
});

$('ul').click(function () {
    alert('Chào mừng bạn đến với Cunghocweb.com');
});

Ở đoạn code trên, chung ta đã chặn trình duyệt chuyển sang trang web khác khi người dùng nhấn vào thẻ a nhưng vẫn cho phép nổi bong bóng sự kiện click lên thẻ ul chứa nó.

Bây giờ, chúng ta lại không muốn khi nhấn vào thẻ a thì thẻ ul sẽ không bắt được sự kiện click. Lúc này hàm stopPropagation sẽ có tác dụng.

$('ul a').click(function (evt){
	alert($(this).text())
    evt.preventDefault();
	evt.stopPropagation();
});

$('ul').click(function () {
    alert('Chào mừng bạn đến với Cunghocweb.com');
});

Ta có thể thấy nên preventDefault và stopPropagation sẽ giúp tránh khỏi những vấn đề đau đầu khi sử dụng return false; 😉