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

2018年3月7日2019年6月12日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!!');

 });