0%

Programmingプログラミングナレッジ

Posted:2019.12.17

javascriptにおけるイベント制御(バブリングを防ぐ・イベントをキャンセルする)

javascriptではいろんなイベントに合わせて処理を実装するケースがありますが、イベントの制御をしないといけない場面もあるかと思います。そんな時によく使うメソッド2つを備忘録として残しておきたいと思います。

 

デフォルトのイベントをキャンセルする「preventDefault()」

各要素にはデフォルトでイベントに合わせた処理が用意されており、例えば下記のように、aタグでhref属性を設定している場合、クリックするとhref属性に指定した値の先へ遷移する形になります。また、input要素のtype属性がsubmitの場合にはformタグで指定しているaction属性に指定した値の先に遷移するなどの仕様になっています。

【HTML】

<a href="https://example.com" id="anchor">リンクテキスト</a>
<form action="https://example.com" method="post">
 <input type="submit" id="submit" value="送信する">
</form>

 

そこで、aタグをクリックした場合にリンク先へ遷移させたくない場合、遷移する前に何らかの処理を挟みたいという場合には、デフォルトのイベントを制御する必要があります。そんな時には「preventDefault()」を使う事で、デフォルトにイベントをキャンセルすることができます。

【javascript】

const element = document.getElementById('anchor');
element.addEventListener('click', (event) => {
 event.preventDefault();
 alert('リンクテキストがクリックされました');
});

 

preventDefault()を使う場合は呼び出し元のコールバック関数に引数を入れておくとイベントオブジェクトが取得できるので、その引数に対してメソッドを実行します。また、preventDefault()を使うことで、スクロールを禁止したりといったユーザー操作をコントロールすることもできます。どちらかといえばその方が利用するケースが多いかもしれません。

 

イベント子要素から親要素へのイベント伝播を防ぐ「stopPropagation()」

javascriptでは子要素のクリックイベントはそのまま親要素にも適用されてしまうという特性があります。その現象をイベントのバブリング(伝播)と呼びます。例えば下記のように、要素が入れ子になっている状態で、子要素をクリックすると、親要素のクリックイベントも呼び出されて実行されてしまいます。

【HTML】

<div id="parent">
 親要素
 <div id="child">
  子要素
 </div>
</div>

 

【javascript】

const parent = document.getElementById('parent');
const child = document.getElementById('child');
parent.addEventListener('click', () => {
 console.log('親要素がクリックされました');
});
child.addEventListener('click', () => {
 console.log('子要素がクリックされました');
});

 

このようにコンソールで確認すると、子要素をクリックした場合には親要素のクリックイベントも発火されてしまいます。

【console】

"子要素がクリックされました"
"親要素がクリックされました"

 

機能によってはこのイベントのバブリングが思わぬ誤動作を招いてしまうことがあります。そんな時には下記のように子要素のイベントに対して「stopPropagation()」メソッドを使うことで簡単にイベントのバブリングを防ぐことができます。

【javascript】

const parent = document.getElementById('parent');
const child = document.getElementById('child');
parent.addEventListener('click', (event) => {
 console.log('親要素がクリックされました');
});
child.addEventListener('click', (event) => {
 event.stopPropagation();
 console.log('子要素がクリックされました');
});

 

こちらも、preventDefault()の時と同じように呼び出し元にコールバック関数に引数を持たせて、イベントオブジェクトを取得し、そのイベントオブジェクトに対してメソッドを実行します。実際にコンソールで確認してみると、イベントのバブリングが起こっていないことが確認できます。

【console】

"子要素がクリックされました"

 

今回はjavascriptでのイベント制御でよく使うメソッドについてまとめてみました。目立たないようなものですが、ウェブ制作では欠かすことのできない場面もありますので、2つ合わせて覚えておきたいですね。

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。また、* が付いている欄は必須項目となります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】