Detect double click on images in javascript

user_8920740 0
Viewed 172

Any suggestion what is the most convenient way to detect if a double click event was not on text, but on images (or other elements on the websites)?

More info: at the moment, I use "document.addEventListener("dblclick", getSelectedText);" to get a double-clicked word on the website. But many users of my extension complain that they often mistakenly double click on images etc... so I want to eliminate those double-clicked events.

javascript
2 Answers

Instead of calling getSelectedText you could call a wrapping function that checks the target element's tag type:

function ignoreTargetImages (event) {
  if (event.target.tagName === 'IMG') {
    // element is an image, so handle differently or ignore
  } else {
    getSelectedText(event);
  }
}

document.addEventListener("dblclick", ignoreTargetImages);
user_160350780

You can create a function which only calls your getSelectedText method if the double click was not on one or more ignored tags

function ignoreTags(ignoreTags, fn){
  return function(e){
    if(!ignoreTags.includes(e.target.tagName)) 
      fn(e);
  }
}

function getSelectedText(e) { console.log("get the text") }

document.addEventListener("dblclick", ignoreTags(["IMG"],getSelectedText));
<p>Some text</p>

<img src="https://via.placeholder.com/150">

This would allow you to add to the list of ignored tags should you need to.

user_2196610
Related