React / JS 如何检测组件是否被点击但内部没有任何内容

Question

Not sure if this problem matches React or vanilla JS.

but if I have this code:

<div>
    <span>Test</Span>
</div>

I want to detect if someone clicked on the div element, but not on the span element or anything else inside the div.

how can it be done?

An example to a div with reference ( React feature ):

<div ref={this.refEl}>
     <span>Test</span>
</div>

and above that code, inside the render I could do:

this.refElement = React.createRef();

And now I have a reference to that element, but now how can I do that?

Answer 1

You can compare event.currentTarget and event.target . When they are equal, the element with the event listener was clicked. When they are NOT equal, a child was clicked.

Here's a full example:

 const h1 = document.querySelector('h1') const section = document.querySelector('section') section.addEventListener('click', (event) => { if (event.currentTarget === event.target) { h1.innerText = 'You clicked the section' } else { h1.innerText = `You clicked the ${event.target.tagName.toLowerCase()} inside the section` } })

 section { background-color: lightgreen; padding: 20px; } section, article, section h1 { padding: 10px; color: white; font-weight: bold; margin: 10px; } article { background-color: lightblue; padding: 20px; } section h1 { background-color: lightcoral; } body { font-family: sans-serif; } h2 { text-align: center; padding-top: 30px; }

 <h1>Try clicking the colored boxes...</h1> <section> Section <article> Article <h1>Heading</h1> </article> </section>

Answer 2

If you're using this in a React app then your onClick handler should use event.stopPropagation() when you don't want the click to be registered by elements that aren't targetted.

Here's an example of a React component using this in action.

import React from 'react'

const MyComponent = () => {
  function handleDivClick() {
    console.log('div clicked')
  }

  function handleSpanClick(e) {
    e.stopPropagation()
    console.log('span clicked')
  }

  return (
    <div onClick={handleDivClick}>
      <span onClick={handleSpanClick}>
        Content
      </span>
    </div>

  )
}