event.stopPropagation() ngăn chặn sự lan truyền trong một chuỗi sự kiện (Event Bubbling).

event.preventDefault() chỉ loại bỏ hành động mặc định của trình duyệt đối với sự kiện đó, nhưng không ngăn chặn sự lan truyền trong chuỗi sự kiện.

Ví dụ, cho đoạn HTML và đoạn code như sau:

<div id="home">
    <button id="man">Man</button>
</div>

$("#home").click(function () {
     console.log('click home');
});
$("#man").click(function (e) {
     console.log('click man');
     e.stopPropagation();
});

Dựa vào dòng code e.stopPropagation() trong phần xử lý sự kiện click của button#man, sự kiện này sẽ không lan truyền đến thẻ div#home cho nên phần xử lý sự kiện click của thẻ div#home cũng sẽ không được kích hoạt.

Khi chúng ta nhấn vào button#man, kết quả cho thấy:

'click man'

 Để so sánh, bạn thay lệnh e.stopPropagation() bằng lệnh e.preventDefault():

$("#home").click(function () {
     console.log('click home');
});
$("#man").click(function (e) {
     console.log('click man');
     e.preventDefault();
});

Kết quả:

'click man'
'click home'

Chú ý: Mặc dù 2 hàm stopPropagation() và preventDefault() chủ yếu được sử dụng cho việc triển khai xử lý sự kiện Jquery, nhưng chúng cũng được sử dụng rất tốt cho Javascript thuần.