https://idea-hack.com/courses/lets-understand-various-events-that-are-used-to-implement-processing-according-to-the-users-operation-in-javascript/lessons/how-to-use-preventdefault-to-cancel-the-default-event-in-javascript/
https://idea-hack.com/courses/lets-understand-various-events-that-are-used-to-implement-processing-according-to-the-users-operation-in-javascript/lessons/how-to-use-preventdefault-to-cancel-the-default-event-in-javascript/

JavaScriptでデフォルトのイベントをキャンセルするpreventDefault()の使い方

JavaScriptでデフォルトのイベントをキャンセルするpreventDefault()メソッド

JavaScriptでデフォルトのイベントをキャンセルするにはpreventDefault()メソッドを使います。

主に「イベント伝搬」を止める目的で使われたり、そもそもページ上で特定のイベントを無効にしたい時に利用します。

メソッド

メソッド意味返り値
イベント.preventDefault()イベントのデフォルトの挙動をキャンセルなし
イベントキャンセルのイベント

サンプルコード

サンプルコードでは、clickイベントが発生した要素が持っているデフォルトの挙動をキャンセルします。

なので、このサンプルコードではボタンにaタグ採用されているので、本来なら別ページに遷移しますが、preventDefault()のおかげで、遷移することなく、本来行いたかった処理を行うことができるわけです。

OutputButton
Pug
a(href="https://idea-hack.com")#button.mb-4.d-block.text-center Button
 div#rectangle
SCSS
#button {
	--background-color: #fff;
  --color: #576574;
	--transition: all .3s;
	margin-bottom: 10px;
  background-color: var(--background-color);
  padding: 10px;
  color: var(--color);
	border: 1px solid #576574;
  cursor: pointer;
  width: 120px;
	transition:  var(--transition);
	&:hover {
		transition: var(--transition);
		color: var(--background-color);
		background-color: var(--color);
	}
}

#rectangle {
	width: 100%;
  height: 150px;
  --start: hsl(0, 100%, 50%);
  --end: hsl(180, 100%, 50%);
  background-image: linear-gradient(-90deg, var(--start), var(--end));
}
JavaScript
/** 長方形 */
const rectangle = document.getElementById('rectangle');

// ボタンをクリックしたら予め用意していたonClickAction()関数を実行する
document.getElementById('button').addEventListener('click', onClickAction);

/** ボタンをクリックする度に、長方形のグラデーション色を変える */
function onClickAction( event ) {
	event.preventDefault();
  // 0~359の間のランダムな数を取得する
  const randomValue = Math.trunc( Math.random() * 360 );
  // グラデーションの開始色と終了色を決定
  const randomColorStart = `hsl(${randomValue}, 100%, 50%)`; //取得したカラーコード
  const randomColorEnd = `hsl(${randomValue + 180}, 100%, 50%)`; //取得したカラーコードの補色

  // 長方形のグラデーションのための変数(--startと--end)を変更
  rectangle.style.setProperty('--start', randomColorStart);
  rectangle.style.setProperty('--end', randomColorEnd);
}
インストラクター
コメント

コメントを残す