JavaScript(jQuery)でtrigger(dblclick)が効かない

Question

前提・実現したいこと

とある要素をダブルクリックしたときに発生するイベントがあり、
それをtrigger(dblclick)を利用して発生させたい
（本来は特定キーの押下時に発生させたいのですが、ここではあまり関係がなさそうなのでソースコード等では省略しています）

発生している問題・試したこと

マウスでダブルクリック操作した場合は
きちんとイベントが発生することは確認できているのですが、
「.trigger("dblclick")」で同じイベントを発生させようとした場合は
何も起こりません。

ソースコードにも記載していますが、
dblclickの代わりにclickで試した場合は問題なく動作しました。
また、「.click()」「.dblclick()」の書き方でも同様でした。

該当のソースコード

HTMLのbody内を抜粋しています。
また、このコードの場合、
ダブルクリック時にクリックイベントも併せて発生してしまいますが、
問題に関係なさそうであればスルーしてやってください。

<div id="clickarea">ここをクリックorダブルクリック</div>

<!-- jQuery読み込み -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script>
// クリック/ダブルクリックのイベント設定
window['clickarea'] = document.getElementById("clickarea");
clickarea.addEventListener("click", function(){
    console.log("クリックされました");
});
clickarea.addEventListener("dblclick", function(){
    console.log("ダブルクリックされました");
});

// クリック/ダブルクリックのイベントを発生させる
$("#clickarea").trigger("click");    // 動作する
$("#clickarea").trigger("dblclick"); // 動作しない
</script>

解決が難しい場合は少し作りを変えることも検討していますが
（イベントの内容を関数化しておいて、各処理から呼び出すなど）
開発上の諸々の都合があり、できればこの方法で解決したいと考えています。
何かご存知の方、よろしくお願いいたします。

追記

取り急ぎ、ご回答ありがとうございます。さらに検証してみます。

「ダブルクリックされました」表示で正常に動いた判定でOKです。
こちらのOSはWindows10で、確認したのは以下ブラウザです。

• GoogleChrome 68.0
• Firefox 61.0

解決しました

みなさま、ありがとうございました。
clickとdblclickで使い方が全く同じというわけではなかったのですね…大変勉強になりました。

今回記載していたサンプルレベルのコードではroot_jpさんの書き方ですぐに解決できました。
（実際に実装しようとしているところはまだ解決していないのですが、
どうやら更に別の問題が絡んでいて完全に別件になってしまいそうなので、
今回質問させていただいた内容としてはcloseさせていただきます）

本当に助かりました。ありがとうございます。

Comments

[m.ts10806]

dblclick動きますよ。「ダブルクリックされました」が出ればOKなんですよね？質問者さんの環境では出ないということですよね？現象が再現される環境（OS,ブラウザバージョンなど）をご提示ください。

Answer 1

多分ですが、jQueryのダブルクリックイベントはネイティブイベントビルトインイベントではないのではないかと。

// クリック/ダブルクリックのイベント設定
window['clickarea'] = document.getElementById("clickarea");
clickarea.addEventListener("click", function(){
    console.log("クリックされました");
});
clickarea.addEventListener("dblclick", function(){
    console.log("ダブルクリックされました");
});
$("#clickarea").on("dblclick", function(){
    console.log("jqダブルクリックされました");
});
// クリック/ダブルクリックのイベントを発生させる
$("#clickarea").trigger("click").trigger("click");    // 動作する
$("#clickarea").trigger("dblclick"); // 動作しない
/* コンソール
(index):34 クリックされました
(index):34 クリックされました
(index):40 jqダブルクリックされました
*/
```**動くサンプル：**[https://jsfiddle.net/zncyg3kd/](https://jsfiddle.net/zncyg3kd/)

---

対応するブラウザによっては `dispatchEvent` で処理できるかも。（未検証）

【イベントの作成と発火 - ウェブデベロッパーガイド | MDN】
[https://developer.mozilla.org/ja/docs/Web/Guide/Events/Creating_and_triggering_events](https://developer.mozilla.org/ja/docs/Web/Guide/Events/Creating_and_triggering_events)

【JavaScriptでjQueryを使わずにイベントをtriggerする】
[https://qiita.com/ryounagaoka/items/a48d3a4c4faf78a99ae5](https://qiita.com/ryounagaoka/items/a48d3a4c4faf78a99ae5)

Answer 2

var clickarea = $("#clickarea");
clickarea.on("dblclick", function() {
  console.log("ダブルクリックされました");
});
clickarea.trigger("dblclick");

Answer 3

HTMLElementを拡張するとよいかもしれません

<script>
HTMLElement.prototype.trigger=function(eventStr){
  if (document.createEvent) {
    var e = document.createEvent("HTMLEvents");
    e.initEvent(eventStr, true, true );
    return this.dispatchEvent(e);
  } else {
    var e = document.createEventObject();
    return this.fireEvent("on"+eventStr, e);
  }
};

window.addEventListener('DOMContentLoaded', function(e){
  const clickarea=document.querySelector('#clickarea');
  clickarea.addEventListener('click', function(){
    console.log("クリックされました");
  });
  clickarea.addEventListener('dblclick', function(){
    console.log("ダブルクリックされました");
  });
  clickarea.trigger('click');
  clickarea.trigger('dblclick');
});
</script>

<div id="clickarea">ここをクリックorダブルクリック</div>