Ripple paper listens for click events outside its container

Question

I am trying to create a simple ripple effect for a card in my application. It works fine, but it also responds to mouse events outside the container:

The code is as follows:

<dom-module> ... <template> ... <paper-material> <div class="wrapper">...</div> <paper-ripple></paper-ripple> </paper-material> ... </template> </dom-module> 

I do not quite understand why he behaves in this way. Any idea?

---

Added

This whole page is an independent dom-module . Apparently using paper-ripple in this way leads to this happening. How to fix it?

Answer 1

UPDATE (June 15, 2015) : paper-ripple 1.0.1 was released on June 11, 2015, which includes a PR that fixes this problem , the fixes recommended in this answer are deprecated. Just update bower.json to bind to PolymerElements/paper-ripple#^1.0.1 .

---

This is a symptom of the same error that haunts another user on SO . Elements of corrugated paper are aimed at the wrong element of the node.

The fix has been merged into the official repository, but not yet released. To use it now, just use the master branch as your version in bower.json .

I would recommend keeping the releases tabs and using the actual version as your dependency instead of the master branch as soon as possible.