I have my React.js application up and running, everything works as it should. By suggestion/request I was asked to add a sort of hidden button/area I can click to perform a specific task. It's not supposed to be a visible button, the suggestion was to make the current clock clickable (or a certain part of it).

First I thought I could just make a div, make it the size I want to and add a onClick to the div tag. It works, but it doesn't work quite as nicely as I'd like. It seems as if the clickable area extends outside of the div tag, which is real odd to me.

I added a simple border to the div tag to make sure it's not larger than I expect, but it's not. Yet, the clickable part is too large.

<div className="test" onClick={...}>Clock</div>

That's how I did my div. As I said, it works, but it doesn't quite work as I wanted to. So my question is in two parts: either if anyone knows why it seems as if my clickable area is larger than it should be (I've defined a width and a height in css, and I can clearly see the area thanks to the border) - or if anyone has done/know some similar solution to the problem. Can I define a certain area on a page and make it clickable? I don't want it seen, so it needs to be transparent and not get in the way of the rest of the application.

Thankful for all the suggestions I can get.

CodePudding user response：

I think the case here may be Event bubbling. If you are not familiar with Event Bubbling it means you may have an 'element' on top of 'another element' and your 'element' for example is clicked (or some other event happened to it) it will pass the event to its parent by default so your 'another element' will be like clicked. To see if this is the case or not, you can look for if there is 'any element' on top of your div element with className test and if any click handler attached to it. If so you can simply attach a e.stopPropagation method call on that 'any element' click handler