Preventing :hover from being applied

[Sergey Shevchenko]

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

[Eric Bidelman]

Could you just set `pointer-events:none` in the capture handler? That blocks events and :hover.

http://jsbin.com/mafatihu/2/edit

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 polymer-dev...@googlegroups.com.
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.

[Sergey Shevchenko]

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.

[Scott Miles]

>> a general-purpose overlay element

Nice. Will this something you can share or publish?

Having best-of-breed, custom-element solutions for hard problems powerfully confirms Polymer's mission.

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/1bbfd796-98e3-457e-8f4b-1a9cab034484%40googlegroups.com.

[Sergey Shevchenko]

Absolutely, I'll post an update here as soon as I finalize the implementation. 

This is for the widget library within Spark IDE, by the way, so it's already public: https://github.com/dart-lang/spark.