I have an element which is on top of another element. I want to capture the mouseover
event with the bottom element, but when the mouse cursor is over the top element the bottom element is not receiving the mouseover
events.
Is there any way to disable the top element from receiving mouse events?
You can't prevent click with css, you must use javascript. The dislpay:none only hide a element, in this case, a div.
The browser triggers many events. A full list is available in MDN, but here are some of the most common event types and event names: mouse events ( MouseEvent ): mousedown, mouseup, click, dblclick, mousemove, mouseover, mousewheel, mouseout, contextmenu.
The best way to target a single, unique element in the DOM is with an ID like you are doing with zombie and lvl . It is both fast to execute and simple to code. It is a given that if someone messes with the id values in your HTML, that will break your Javascript. That's just the way it is.
Dynamically disable all clicks on pagelet freezeClic = false; // just modify that variable to disable all clics events document. addEventListener("click", e => { if (freezeClic) { e. stopPropagation(); e. preventDefault(); } }, true);
Elements can be easily disabled from receiving mouse events using, in your example, the following CSS:
#region2 { pointer-events: none; }
For more discussion, see this SO post.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With