In JavaScript, you can verify whether the content or blank space of an element was clicked

Question

In JavaScript, you can verify whether the content or blank space of an element was clicked

Is it possible to determine if the clicked part of an element is text or white space?

https://i.sstatic.net/0pFgB.jpg

My attempts so far have been unsuccessful:

body.addEventListener('contextmenu', (e) => {
    e.preventDefault(); // Prevent the default context menu
    const clickX = e.clientX;
    const clickY = e.clientY;
    item = e.target; // Get the clicked element
    if (item.textContent.trim() !== '') { do sth...; }
});

javascript html css

Answer 1

Answer №1

document.body.addEventListener('contextmenu', (e) => {
    e.preventDefault(); // Stopping the default context menu
    const clickX = e.clientX;
    const clickY = e.clientY;
    const item = e.target;
    if (item.tagName === 'SPAN') {
      console.log('text clicked')
    } else if (item.tagName === 'P') {
      console.log('paragraph clicked')
    }
});

p {
  background: red;
}

span {
  background: magenta;
}

<p><span>Text</span></p>

Answer 2

document.body.addEventListener('contextmenu', (e) => {
    e.preventDefault(); // Stopping the default context menu
    const clickX = e.clientX;
    const clickY = e.clientY;
    const item = e.target;
    if (item.tagName === 'SPAN') {
      console.log('text clicked')
    } else if (item.tagName === 'P') {
      console.log('paragraph clicked')
    }
});

p {
  background: red;
}

span {
  background: magenta;
}

<p><span>Text</span></p>

In JavaScript, you can verify whether the content or blank space of an element was clicked

Answer №1

Similar questions

Guide to embedding bootstrap.min.js into ember-bootstrap extension

Vue routing stops working when there is no hash in the URL (no designated input file)

Trouble with Unveiling the Secondary Accordion

What is the best way to assign the value of a specific key in one array as the key in a different array?

How to select a DOM element in Angular 2.x

Selecting the appropriate color code based on a specified value

Enhance your message inbox experience with jQuery/Javascript features inspired by Gmail, including the ability to select all messages with a checkbox and

Elements within the div are overlapping each other

Is submitting data through ajax giving you trouble?

How can I use Selenium and Python to locate an element on a webpage and extract its input value?

Styling CSS: Create circular images with dynamic text positioning or resizing on screens larger than 768px

Monitor $localStorage for any modifications

Guide on exporting a function from a module as a class property

Direct your attention to the final item in a visible array within a ReactJS component

The bookdown feature of tufte_html_book, when combined with the csl style, struggles to properly position citations

Python script unable to locate div popup using Selenium

When switching between classes, it is not possible to apply a different value to the same CSS property

"Learn how to seamlessly submit a form without reloading the page and send data back to the same page using Node and Express

The Mapbox map fails to display properly upon initial page load

Span element not displaying as a clickable hyperlink