Determine if an Image is Chosen upon Click with Javascript

Question

Determine if an Image is Chosen upon Click with Javascript

I am currently working on a wysiwyg editor and I'm facing an issue where I need to determine if a user has clicked on an image within the selection range. Is there a method to detect this without attaching event handlers directly to the image itself? Currently, I am monitoring keyup and mouseup events by utilizing Tim Down's getselectedtext() function to check for selected text, but I would like to find a way to identify if the selection contains an image tag or similar element by examining el.nodeName.

While I can successfully identify the image when it is fully highlighted using Tim Down's getselectedtext() function, it does not return any results if the image is simply clicked (with four squares on each corner) instead of being highlighted in blue after dragging the mouse across it. Any suggestions or solutions? Preferably looking for a pure JavaScript approach.

javascript

Answer 1

Answer №1

A simple solution is to add a single listener to the entire document, reducing the need for multiple attachments. Then, you can easily check whether the element clicked on was an image.

document.body.addEventListener('click', (event) => {
  if (event.target.tagName === 'IMG') {
    console.log('image clicked');
  }
});

<div>content</div>
<img src="https://www.gravatar.com/avatar/34932d3e923ffad9a4a1423e30b1d9fc?s=48&d=identicon&r=PG&f=1">
<div>more content</div>

Answer 2

A simple solution is to add a single listener to the entire document, reducing the need for multiple attachments. Then, you can easily check whether the element clicked on was an image.

document.body.addEventListener('click', (event) => {
  if (event.target.tagName === 'IMG') {
    console.log('image clicked');
  }
});

<div>content</div>
<img src="https://www.gravatar.com/avatar/34932d3e923ffad9a4a1423e30b1d9fc?s=48&d=identicon&r=PG&f=1">
<div>more content</div>

Determine if an Image is Chosen upon Click with Javascript

Answer №1

Similar questions

What is the best way to organize large amounts of data into an array?

After refreshing the page in Next JS, there is a delay in loading the Swiper Js styles. The Swiper slides appear stretched while waiting for Next JS to load the styles. Any suggestions

How can I use JavaScript to trigger a button click event inside an iframe element

Next.js is refusing to render an array of HTML elements

Every character entered in JSP should trigger an instant retrieval of the corresponding string in the servlet

Javascript - understanding variable scope

Organize various base arrangements within Angular version 2

What is the best way to combine two elements with Mongoose?

Leveraging jest for handling glob imports in files

Encountering an unforeseen issue with the config.kit.methodOverride while executing Svelte

Is NodeJS Asynchronous: Has the callback been called twice?

I encountered a problem with a three.js video example not functioning properly on my iPhone 6s, displaying only a black screen

Ways to retrieve base64 encoded information from an image within an HTML document

working with json files in node.js

What could be causing the form DOM object values to not update in this specific instance?

Swap out a button for another using JavaScript

Utilizing Salesforce and DocuSign: A guide to automatically filling in the recipient of my envelope through DocuSign with the contacts from my records

What is the best way to limit the date picker to only accept numbers and hyphens in the input field while blocking any other input in Vue?

Embedding a string within an image source attribute in VueJS

How can I showcase CSV data as clickable links and images on a website using HTML?