CODEWITHSUNDEEP
javascriptdomparametersaddeventlistener
Dat Boi
Dat Boi

Reputation: 683

'dbclick' event listener not working but 'click' is

Currently, I am making a password storing website. Part of the UI is when you double click on a password item it gives you the option to delete it.

Here is my event listner (with function), myPasswordScreenID is the parent element to all the classes with passwordItem.

document.getElementById('myPasswordsScreenID').addEventListener('dbclick', function(event) {
  if (event.target.classList.contains('passwordItem')) {
    if (confirm('Would you like to delete this item? It will be gone forever!')) {
      event.target.style.display = 'none';
      event.target.style.margin = 0;
      localStorage.removeItem(event.target.id);
    }
  }
}, false);

For some reason if I use the event listener 'click' instead of 'dbclick' it works? I have no clue why. Any help would be greatly appreciated.

Upvotes: 0

Views: 447

Answers (2)

Andrea Oggioni
Andrea Oggioni

Reputation: 129

You can detect double clicks with dblclick.

Upvotes: 2

Malekai
Malekai

Reputation: 5011

In addition to @AndreaOggioni's answer, using the code from MDN:

const element = document.getElementById('myPasswordsScreenID');

element.addEventListener('dblclick', function(event) {
  if (
    event.target.classList.contains('passwordItem') &&
    confirm('Would you like to delete this item? It will be gone forever!')
  ) {
    event.target.style.display = 'none';
    event.target.style.margin = 0;
    localStorage.removeItem(event.target.id);
  }
});

Good luck.

Upvotes: 0

Related Questions