I know it'll most likely not be possible(as I've been told by others I've talked about this to) but I thought I'd continue to try to find some solution. UPDATE: Here's some answers I've already got from people who have found some use cases for pointer-events: none on regualr HTML elements. Therefore, it seems like cases in which an overlay is used are the exact cases where you would not want users to be able to click on elements behind the overlay. When used with non-SVG elements, only three values are available - inherit, auto and none. This is default: none: The element does not react to pointer events : initial: Sets this property to its default value. ( I replaced your clunky alert with some console.log, all you need to do to see it is open your Developper tools by pressing F12 while on the fiddle's tab).Notice how when you click on the "shoutbox", both messages from shoutbox AND bob are logged. HTML, CSS, JavaScript? Unhide the top element. To solve this problem, I use focus when the user clicks on the textbox. In this case, it seems almost counterproductive to allow pointer events to the elements behind the overlay. Capture the ‘mousedown’ event for the top element (the element you want to turn off pointer events). As is, I don't think what you want to do is feasible. auto restores the default functionality (useful for use on child elements of an element with pointer-events: none; specified. Source. There’s a workaround for IE – use inline SVG and set pointer-events=”none” in SVG. javascript – How to get relative image coordinate of this div? Even if you click on an area that looks like it belongs to the rectangle behind, the circle receives the click event and the stroke changes colour. javascript – window.addEventListener causes browser slowdowns – Firefox only. I’ve found another solution to solve this problem. I hope this can also work in IE 9 and below. Questions: I have a website that I am developing using CSS3 and I have h1 tag for the title:
main title
Now I want the title to be in a different color:main
Articles on frontend development and more. - http://imgur.com/a/n9Pp2, To allow me to still click on the text box I've had to set pointer-events: none; now this works and all... but now I can't register a click handler on it. UPDATE: Some people have pointed out some genuinely great use cases for this property which I've listed at the end of the article. Capture the ‘mousedown’ event for the top element (the element you want to turn off pointer events). For discussing Cascading Style Sheets, design principles, and technological innovations related to web development.
As I’ve said, which is purely my opinion, I don’t think there is a reason to use pointer-events for regular, interactive, HTML elements.
As we saw in the example above, this value will prevent all pointer events - hover, active, click - from being applied to the element. But of course clicking on the embed returns nothings. This is useful, for example, if we have shapes placed on top of each other and want the shape that is not necessarily at the top of the stack to receive (or not receive) mouse events.
Articles on frontend development and more. - http://imgur.com/a/n9Pp2, To allow me to still click on the text box I've had to set pointer-events: none; now this works and all... but now I can't register a click handler on it. UPDATE: Some people have pointed out some genuinely great use cases for this property which I've listed at the end of the article. Capture the ‘mousedown’ event for the top element (the element you want to turn off pointer events). For discussing Cascading Style Sheets, design principles, and technological innovations related to web development.
As I’ve said, which is purely my opinion, I don’t think there is a reason to use pointer-events for regular, interactive, HTML elements.
As we saw in the example above, this value will prevent all pointer events - hover, active, click - from being applied to the element. But of course clicking on the embed returns nothings. This is useful, for example, if we have shapes placed on top of each other and want the shape that is not necessarily at the top of the stack to receive (or not receive) mouse events.