Hi all,
This is not strictly Polymer-related, but I've encountered this in the
context of writing a Polymer element, and I thought that I could use the
expertise here.
I'm writing a general-purpose overlay element that can auto-close on an
outside click and also can be modal (both features are configurable via
attributes). For auto-close, I'm attaching a capture phase on-click handler
to document; the handler stops event propagation and thus blocks the event
from reaching the original target:
// For all events to intercept/block:
document.addEventListener(event, handler, true);
function handler(e) {
if (!isPointInOverlay(e.client)) {
if (modal) {
e.stopPropagation();
e.preventDefault();
}
if (autoClose) {
closeOverlay();
}
}
}
With this, I've been able to successfully block click,
mousedown/up/enter/leave/over/out, contextmenu, and everything else I
needed in order to effectively disable the rest of the UI, except one
thing: the :hover style still gets applied to the elements which have it
defined. Is there a DOM event to intercept in order to prevent that? As
mentioned, blocking mouseenter/leave/over/out doesn't seem to affect :hover.
I could probably use the standard technique of placing a transparent
blocking <div> over the entire UI, but since I already need a capture
handler for auto-closing, I thought I could reuse that.
Thanks,
--Sergey
Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups
"Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/polymer-dev/241b9355-9f0e-41cd-8b20-3b015a6d638e%40googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
