如何防止当我点击一个按钮

内部div的纸纹波我有一个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>

来源

2017-02-22 Sohaib

的片段作为永久禁用它？为什么不去除''元素？ – tony19

@ tony19我已更新问题 – Sohaib

找到了答案。 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>

来源

2017-02-22 06:27:39 Sohaib

只是改变了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>

来源

2017-02-22 05:11:50

对不起，但'button'必须在div – Sohaib

之内我已更新了代码。现在它在一个div内 –

如何防止当我点击一个按钮

回答

相关问题