JSFiddle - React, Tailwind, and code Playground

by Kim Nguyen

HTML

<!-- preventDefault -->
<div onclick="alert('Div is clicked!')">
  <a
    id="anchor1"
    href="https://viblo.asia"
    onclick="onClick(event)"
    target="_blank">
    Click here
  </a><br>

  <a
    id="anchor2"
    href="https://viblo.asia"
    onclick="onClickPrevent(event)"
    target="_blank">
    Click with preventDefault()
  </a><br>
  <a id="anchor2" href="https://viblo.asia" onclick="onClickStop(event)" target="_blank">Click with stopPropagation()</a>
  
  <p>
    1. Khi click vào link có preventDefault, event click sẽ bị xóa bỏ khỏi element anchor2. Event click không còn nên trình duyệt sẽ không chuyển tiếp sang trang ở link anchor2 nữa. Tuy nhiên, event click vẫn lan truyền ra thằng cha chứa nó, nên bạn sẽ thấy thông báo 'Div is clicked!'.
  </p>
  <p>
    2. Khi click vào link có stopPropagation, event click sẽ không bị xóa bỏ khỏi element anchor2, nhưng nó sẽ không lan truyền ra thằng cha chứa nó nữa. Chúng ta chỉ thấy thông báo 'Click with stopPropagation' rồi trình duyệt tiếp tục chuyển trang. Nhưng không có thông báo 'Div is clicked nữa.'
  </p>
</div>

JavaScript

function onClick(event) {
  alert('Clicked!')
}

function onClickPrevent(event) {
  alert('Clicked with preventDefault!');
  event.preventDefault();
}

function onClickStop(event) {
  alert('Clicked with stopPropagation!');
  event.stopPropagation();
}