1

I have a div that contains some text inputs. I would like those text inputs to clicked and receive basic mouse events, but I would like to disable the containing div. Is there a way to do this? The div has a higher z-index than some other elements, it is absolutely positioned, and is not allowing me to click elements underneath it. Thanks!

botbot
  • 7,299
  • 14
  • 58
  • 96
  • post your HTML, and it's easier to see what you're trying to do? – adeneo Jul 28 '12 at 19:49
  • too much code involved. i think the question is basically if a div A is a layer higher than div B, can div B receive clicks? I think @flem below has the right answer. i more or less just wanted to confirm that B cannot receive clicks. thanks. – botbot Jul 28 '12 at 20:17
  • 1
    There are ways to do this sort of thing, but they are either not very well supported by browsers (pointer events), or complicated (registrering clicks on top element, figuring out if they are within a certain area where the lower element is positioned etc.), so in most cases just changing the layout is the way to go. – adeneo Jul 28 '12 at 20:20
  • thanks @adeneo. i am going to ditch the absolutely positioned container and just append the text fields to the body, that way the container won't block clicks... – botbot Jul 28 '12 at 20:24

1 Answers1

1

You cannot click elements that are below (depth) another element. Give the actionable input elements higher z-indexes (and abs/rel positioning) than the covering div.

Paul Fleming
  • 24,238
  • 8
  • 76
  • 113
  • great, thanks for the answer, just wanted to confirm. the solution i will choose now will be to get rid of the containing div and append the absolutely positioned text fields to the body of the document. – botbot Jul 28 '12 at 20:15
  • 1
    `cannot` is a strong word, in newer browsers you can do just that with CSS [pointer events](https://developer.mozilla.org/en/CSS/pointer-events/). Just saying. – adeneo Jul 28 '12 at 20:18
  • Pointer events are traditionally for SVG. Although **some** browsers implement it for html, it can be considered experimental for some of them. Note also that pointer events for html are not currently in any specification. They are postponed to CSS4. We may essentially never see a standard implementation. – Paul Fleming Jul 29 '12 at 07:41
  • Looks like they are well supported today: https://caniuse.com/?search=pointer-events – ojathelonius Jun 23 '21 at 13:48