【JavaScript】ダブルクリックをトリガーにしたイベント

JavaScriptイベント

ダブルクリックをトリガーにしたJavaScriptイベントの実装サンプルです

JavaScript・jQueryそれぞれ、functionとアロー関数版

JavaScript:ダブルクリックイベント動作サンプル

サンプルではダブルクリック検出時にアラートを表示しています

See the Pen JavaScript double click ivent by yochans (@yochans) on CodePen.

JavaScript:ダブルクリックイベントのサンプルコード

HTML

<div id="item"></div>

JavaScript(function)

const target = document.getElementById('target');

target.addEventListener('dblclick',function() {

    //処理
    alert('double click!!');

 }, false);

JavaScript(アロー関数)

const target = document.getElementById('target');

target.addEventListener('dblclick', () => {
  
    //処理
    alert('double click!!');
  
}, false);

jQuery:ダブルクリックイベント動作サンプル

Jqueryではdblclick()が用意されています

See the Pen JavaScript double click ivent(jQuery) by yochans (@yochans) on CodePen.

jQuery:ダブルクリックイベントのサンプルコード

HTML

<div id="item"></div>

jQuery(function)

$('#target').dblclick(function(){

    //処理
    alert('double click!!');

});

jQuery(アロー関数)

$('#target').dblclick(() => {

    //処理
    alert('double click!!');

 });

JavaScriptイベント

Posted by Yousuke.U