How do I double-click on objects using javascript? Do I have to .click() twice?

Question

I tried searching for this but the only results that come up are on double click, and never how to automatically double click on something. (trigger a double-click.)

I can click once, and have tried doing so twice to "Create" a double-click but failed. I'm assuming that it's because of the timing which is why I set up a timer to see how much time there is between my double clicks.

Is there an automated way to double click? I'm not using jQuery so please avoid it in the answer.

So I click using:

document.getElementyById("somethinbg").click();

I tried double clicking with:

document.getElementById("something").dblclick(); 

With no success.

Answer 1

Dispatch a dblclick event like so:

var targLink    = document.getElementById ("something");
var clickEvent  = document.createEvent ('MouseEvents');
clickEvent.initEvent ('dblclick', true, true);
targLink.dispatchEvent (clickEvent);

You can see the code in action at jsFiddle.

Answer 2

With jquery dblclick method you can that very easily. Some thing like.

$("p").dblclick(function(){
   alert("The paragraph was double-clicked.");
});

see following link for more information

http://www.w3schools.com/jquery/event_dblclick.asp

http://api.jquery.com/dblclick/

and If you are using javascript then see following link.

Javascript Double Click Event

Answer 3

document.querySelector("#MyID").dispatchEvent(new MouseEvent("dblclick"))

Example

<h3>press <kbd>Ctrl</kbd></h3>
<p>double click here</p>

<script>
  const targetElem = document.querySelector(`p`)

  targetElem.ondblclick = ()=>console.log("double click")

  document.addEventListener("keydown", (keyboardEvent) => {
    if (keyboardEvent.key === "Control") {
      targetElem.dispatchEvent(new MouseEvent("dblclick"))
    }
  })
</script>

MouseEvent Inheritance:

• UIEvent
• Event

so you can do init as below

new MouseEvent("dbclick", {
screenX: 0, screenY: 0 button: 0, //... //  MouseEvent itself
bubbles: true, cancelable: true, composed: false, //  Event
view: window //  UIEvent
// ... 
})

i.e. The MouseEventInit dictionary also accepts fields from UIEventInit and from EventInit dictionaries.

---

Note Event.initEvent() is deprecated. Use Event instead of it.

Answer 4

document.getElementById("something").ondblclick = function(){
       alert("The paragraph was double-clicked.");
}