score:2
it looks like you are using event.target
to get the clicked element. in this case target won't be button every time you click. it always refers to the element got the event fired upon.
i would suggest you to use event.currenttarget
which will always be the element which is bound to the event.
score:1
you're clicking the image, so the image is the element where the onclick
event is happening. this is the expected behaviour, you clicked the image, not the button that contains it.
to prevent any click events happening on the image, you style the image element with css pointer-events property:
pointer-events: none;
this prevents any pointer events (click interactions included) on the image, and the button will now be the element returned for the event.
if you have several elements inside your button, it might be easier to style the button itself with:
button > * {
pointer-events: none;
}
this will prevent any child elements of the button from being clicked.
Source: stackoverflow.com
Related Query
- On button click i get event of child element
- React/Next.js how to get other Element event target value on button click
- CreateContext hook is not passed data to child component on button click event
- How do you get a button in DIV not call the <div> click event
- is there any way to get the "Allow" button click event in "Allow to use microphone popup"(chrome latest)?
- How to make an axios get request on button click event in React?
- How to get same ID from button that has children elements inside, prevent child element click?
- React js - How to get Click event values from child component to parent component?
- get the button click event without the canvas
- Triggering click event of child of element generated from an array
- How to stop click event on Parent element when clicking the child element
- React get state/data of parent element when click on child element
- React click button event on list always returns reference to the last element
- How to get previous clicked element on any click event in Reactjs?
- Get object data and target element from onClick event in react js
- Simulate click event on react element
- How can I get an input's value on a button click in a Stateless React Component?
- How to handle click on child element
- React TypeScript get Data Attribute From Click Event
- Pass React Ref from parent to child in order to get DOM element
- WKScriptMessageHandler won't Listen to 'onclick' or 'click' event on a button element on a webpage. The web page is developed using Reactjs
- Unit test: simulate the click event of child component in parent using enzyme
- How to get the react component instance corresponding to event.target element in a click handler?
- How I can disable a button in React js for 5 seconds after click event
- how to get input field value on button click in react?
- (Next/react) SWR refresh from button click in child component - can I use a callback?? (function to function)
- Jest error - Not implemented: navigation (except hash changes) when click event is triggered on an anchor element
- How to get key attribute of parent div when button is click in ReactJS
- Default disabled button click event is not firing on reactjs
- How to get value of bubble in amcharts when click event triggered
More Query from same tag
- Typescript Constructor Parameters. Parsing error: Unexpected reserved word 'public'
- React Js - Styling innerHTML on component - Not working - Parent styling is overriding child styling
- how to improve filter ReactJS
- Array Elements displaying in single line
- Call a React component inside a function, when a button is clicked
- mock value inside the component file
- How to use styled components with Material UI input?
- MaterialUI - Indepdendent Grids next to each other?
- Why changing information in MongoDB doesn't change it on the site with out reloading?
- TypeError: Cannot read property 'email' of undefined props using Jest and React. Why?
- useState loading not updating before async
- How to let react only render part of the component?
- How to open torch light in mobile (or flash light) with React.Js
- Issue with refetching specific GraphQL obvervable query
- Import TS typings for Node module
- How to Handle onClick is Null on Shared React Component?
- Redux state is returning undefined in component even after redux-logger reports a success dispatch with correct values in payload
- How to run eject in my react app?
- How to pass down data through 3 class components in react correctly?
- Why does async function fail as soon as I reference value set by useParams react hook?
- Highlight and un-highlight div on onClick in React
- react js lodash filter conditional filter attribute
- I want to design automatically generated card in React js
- Bootstrap not working with React
- Missing interface from installed packages (Typescript)
- setting style values dynamically - react
- How to set a value to a variable inside ternary
- re export styled from styled components macro not working
- How to manage state on a single react element for hover effect?
- Block sending requests twice react-redux (hooks)