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.
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);
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.