Wie zu verhindern, dass die Papier-Ripple in div, wenn ich auf eine Schaltfläche klicke

Ich habe eine div mit paper-ripple und eine button drin. Klicken Sie irgendwo innerhalb der div sollte die Ripple-Animation, die wie erwartet funktioniert, aber nicht die Ripple, wenn die button geklickt wird.Wie zu verhindern, dass die Papier-Ripple in div, wenn ich auf eine Schaltfläche klicke

Bitte führen Sie den Code-Snippet

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

Quelle

2017-02-22 Sohaib

Wie es dauerhaft deaktivieren in? Warum nicht einfach das '' Element entfernen? – tony19

@ tony19 Ich habe die Frage aktualisiert – Sohaib

Die Antwort gefunden. paper-ripple hört auf die 'down' Aktion und startet die Ripple-Animation. Also müssen Sie die gleiche Aktion für die Schaltfläche anhören und die Ereignisausbreitung stoppen.

unter

das Snippet Versuchen

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

Quelle

2017-02-22 06:27:39 Sohaib

einfach die HTML-Struktur geändert und hinzugefügt paar Zeilen CSS und es wird funktionieren wie erwartet

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

Quelle

2017-02-22 05:11:50

Sorry, aber 'Button' muss in der div sein – Sohaib

Ich habe den Code aktualisiert. Und jetzt ist es in einem div –

Wie zu verhindern, dass die Papier-Ripple in div, wenn ich auf eine Schaltfläche klicke

Antwort

Verwandte Themen