I think this is exactly what I need, thanks! The actual solution to deal with all permutations of modal, auto-close and none of them is going to be a combination of pointer-events:none, the capture handler, and probably a backdrop div after all, but pointer-events:none was the missing piece.
On Monday, February 24, 2014 12:47:59 PM UTC-8, Eric Bidelman wrote: > > Could you just set `pointer-events:none` in the capture handler? That > blocks events and :hover. > > http://jsbin.com/mafatihu/2/edit > > > On Thu, Feb 20, 2014 at 1:40 PM, Sergey Shevchenko > <[email protected]<javascript:> > > wrote: > >> 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] <javascript:>. >> 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. >> > > 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/1bbfd796-98e3-457e-8f4b-1a9cab034484%40googlegroups.com. For more options, visit https://groups.google.com/groups/opt_out.
