jQuery で任意の要素にダブルクリックイベントを設定する方法

jQueryで要素にダブルクリックイベントを設定する

jQueryを使って要素にダブルクリックイベントを設定するには、セレクトした要素に「dblclick()」を接続し、( )内に実行したいスクリプトを記述します。

セレクトした要素.dblclick();

例）$("#btn").dblclick();  // id="btn"の要素にダブルクリックイベントを設定

jQuery + JavaScript ソース

「btn」という ID が付いたボタン要素をダブルクリックすると「olympic」というIDが付いた要素の内側の html を書き換えます。

<script type="text/javascript">
    $(function(){
        $("#btn").dblclick(function(){
        $("#dinner").html("<strong></strong>");
        });
    });
</script>

HTML

HTMLは「input」ボタン要素と「div」要素で構成されています。 

<div id="olympic">2020年のオリンピック開催国は？</div>
<input id="btn" type="button" value="ダブルクリック" />

サンプルの実行 

ボタンを押すとボタン上部に回答が表示されます。 

結果

2020年のオリンピック開催国は？

備考・その他

シングルクリックイベントの設定方法はこちらを参考にしてください。

javascript-style.hatenablog.com

END