单击按钮时如何防止 div 内部出现纸波纹

Question

我有一个 div，里面有 paper-ripple 和一个 button。单击 div 内的任意位置应该会播放按预期工作的波纹动画，但不希望在单击 button 时出现波纹。

请运行下面的代码片段

<!doctype html>
<head>
  <base href="https://polygit.org/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link href="polymer/polymer.html" rel="import"/>  
  <link href="paper-ripple/paper-ripple.html" rel="import"/>
</head>

<body>
  <test-elem></test-elem>
  
  <dom-module id="test-elem">
    <template>
      <style>
        div { 
          width: 150px;
          position: relative; 
          padding: 15px;
          border: 1px solid black;
        }
        button { color: green; border: 1px solid green;  }
      </style>
    
      
      <div>
        <paper-ripple></paper-ripple>
        <button>Button</button>
      </div>  
    </template>
    
    <script>
      Polymer({ is: 'test-elem'})
    </script>
    
  </dom-module>

</body>

Answer 1

刚刚更改了 HTML 结构并添加了几行 CSS，它将按预期工作

<!doctype html>
<head>
  <base href="https://polygit.org/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link href="polymer/polymer.html" rel="import"/>  
  <link href="paper-ripple/paper-ripple.html" rel="import"/>
</head>

<body>
  <test-elem></test-elem>
  
  <dom-module id="test-elem">
    <template>
      <style>
        div.inner { 
          width: 150px;
          height: 40px;
          position: absolute; 
          padding: 15px;
          border: 1px solid black;
        }
        button {
          color: green;
          border: 1px solid green;
          position: absolute;
          top: 10%;
          left: 5%;
        }
      </style>

      <div>
        <div class="inner">
          <paper-ripple></paper-ripple>
        </div>  
        <button>Button</button>
      </div>
    </template>
    
    <script>
      Polymer({ is: 'test-elem'})
    </script>
    
  </dom-module>

</body>

Answer 2

找到答案了。 paper-ripple 监听 'down' 动作并启动涟漪动画。因此需要监听按钮的相同动作并停止事件传播。

试试下面的代码片段

<!doctype html>
<head>
  <base href="https://polygit.org/polymer+v1.9.2/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link href="polymer/polymer.html" rel="import"/>  
  <link href="paper-ripple/paper-ripple.html" rel="import"/>
</head>

<body>
  <test-elem></test-elem>
  
  <dom-module id="test-elem">
    <template>
      <style>
        div { 
          width: 150px;
          position: relative; 
          padding: 15px;
          border: 1px solid black;
        }
        button { color: green; border: 1px solid green;  }
      </style>
    
      
      <div>
        <paper-ripple></paper-ripple>
        <button id="btn">Button</button>
      </div>  
    </template>
    
    <script>
      Polymer({ is: 'test-elem',
         listeners: {'btn.down': 'onDown'},

         onDown: function(e) {
            e.stopPropagation();
         }
      });
    </script>
    
  </dom-module>

</body>

单击按钮时如何防止 div 内部出现纸波纹

How to prevent the paper-ripple inside div when I click on a button

polymer

paper-elements