JavaScript,jQuery,CSS,HTMLの達人

JavaScriptとjQueryとCSSとHTML の使い方を解説しているブログ

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年のオリンピック開催国は?

END