Question

我有一个https://docs.unity3d.com/Manual/class-LineRenderer.html，其中包含div和paper-ripple。单击button内的任何位置都应播放波纹动画，该动画按预期工作，但在单击div时不希望出现波纹。

请运行下面的代码段

button

Answer 1

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

＆＃13;

<!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>

＆＃13;

Answer 2

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

尝试下面的代码段

＆＃13;

<!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>

＆＃13;

单击按钮时如何防止div内的纸张波纹

2 个答案: