【HTML/CSS】CSSでクリックイベントを無効化する

2024.11.21

コード

$ tree --dirsfirst
.
├── css
│   └── style.css
├── js
│   └── index.js
└── index.html

.target {
  pointer-events: none;
}

#box-1 {
  background-color: red;
  margin: 10px;
  width: 100px;
  height: 100px;
}

#box-2 {
  background-color: blue;
  margin: 10px;
  width: 100px;
  height: 100px;
}

$(document).ready(() => {
  $('#box-1')[0].addEventListener('click', (event) => {
    console.log('box-1 click', event);
  });

  $('#box-2')[0].addEventListener('click', (event) => {
    console.log('box-2 click', event);
  });
});

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <title>sample</title>

  <script src="https://code.jquery.com/jquery-3.7.1.min.js"
    integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
  <script src="js/index.js"></script>

  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <div id="box-1" class="target"></div>
  <div id="box-2"></div>
</body>

</html>

　ブラウザで index.html にアクセスすると、赤い四角と青い四角が表示されます。青い四角をクリックするとコンソールにログが出力されますが、赤い四角をクリックしてもログが出力されません。