如何防止當我點擊一個按鈕

內部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內 –

如何防止當我點擊一個按鈕

回答

相關問題