「jQuery」ダブルクリックイベントを設定するサンプル

2022年2月12日

環境
jquery 3.6.0
書式
$(function(){
$('#セレクタID’).dblclick(function(){処理コード});
.dblclick()を設定して、ダブルクリックイベントを設定します。
使用例

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ダブルクリックイベントのサンプル</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(function(){
$('#confirm').dblclick(function(){
alert("イベントダブルクリックされました");
});
});
</script>
</head>
<body>
<input type="button" id="confirm" value="検証">
</body>
</html>
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>ダブルクリックイベントのサンプル</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script> $(function(){ $('#confirm').dblclick(function(){ alert("イベントダブルクリックされました"); }); }); </script> </head> <body> <input type="button" id="confirm" value="検証"> </body> </html>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ダブルクリックイベントのサンプル</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(function(){
  $('#confirm').dblclick(function(){
    alert("イベントダブルクリックされました");
  });
});
</script>
</head>
<body>
  <input type="button" id="confirm" value="検証">
</body>
</html>

実行結果
「検証」ボタンをダブルクリックする際、「イベントダブルクリックされました」が表示されます。

jQuery

Posted by arkgame