絶対配置は上の埋め込みを無視しますが、埋め込みを残さないのはなぜですか？

Question

だから、私はリップルをクリックするところに表示しようとしていますが、パディングを残したピクセルの量に関係なく、右側に配置するようです。なぜ誰が知っていますか？

また、誰もが彼らはもはや使用されていない一度:)

var links = document.getElementsByTagName('button'); 
 

 
function ripple(e) { 
 
\t var rpl = document.createElement('div'); 
 
    this.appendChild(rpl); 
 
    
 
    var d = Math.max(this.clientWidth, this.clientHeight); 
 
    
 
    rpl.style.width = rpl.style.height = d+"px"; 
 
    
 
    pl = window.getComputedStyle(this, null).getPropertyValue('padding-left'); 
 
    
 
    rpl.style.left = e.clientX - this.offsetLeft - d/2 + "px"; 
 
    rpl.style.top = e.clientY - this.offsetTop - d/2 + "px"; 
 
    
 
    rpl.classList.add('ripple'); 
 
    
 
} 
 

 
Array.prototype.forEach.call(links, function(b){ 
 
\t b.addEventListener('click',ripple); 
 
});

/*custom fonts - Bitter, Montserrat*/ 
 
@import url('http://fonts.googleapis.com/css?family=Montserrat|Bitter'); 
 
/*basic reset*/ 
 
* {margin: 0; padding: 0;font-family: arial; box-sizing: border-box} 
 
body { 
 
\t background: #212121; 
 
    display: flex; 
 
    justify-content: center; 
 
    flex-wrap: wrap; 
 
} 
 

 
h1 { 
 
\t text-align: center; padding: 85px 100px; 
 
    color: whitesmoke; 
 
    width: 100%; 
 
    margin: 20px; 
 
} 
 

 
.green {background: limegreen; border: 3px solid limegreen;} 
 
.blue {background: dodgerblue; border: 3px solid dodgerblue;} 
 
.orange {background: orange; border: 3px solid orange;} 
 

 
button { 
 
    min-width: 100px; 
 
    margin: 1%; 
 
    position: relative; 
 
    user-text-select: none; 
 
    border-radius: 4px; 
 
    font-family: arial; 
 
    font-size: 18px; 
 
    cursor: pointer; 
 
    outline: none; 
 
    color: #212121; 
 
    overflow: hidden; 
 
    padding: 18px 30px; 
 
} 
 

 
.ripple { 
 
    position: absolute; 
 
    background: #f5f5f5; 
 
    height: 50px; 
 
    width: 50px; 
 
    border-radius: 50%; 
 
    opacity: 0.5; 
 
    z-index: 3; 
 
    transform: scale(0); opacity: 0.9; 
 
    animation: ripple 3s linear; 
 
} 
 

 

 
@keyframes ripple { 
 
    to {transform: scale(2.5); opacity: 0;} 
 
}

<h1>Ripple Click Effect</h1> 
 

 
<button class="green">Log in</button> 
 

 
<button class="blue">Sign up</button> 
 

 
<button class="orange">Subscribe to newsletter</button>

Answer 1

うん素晴らしいことだそのdivを削除するには、いくつかの良い方法を知っていればちょうどあなた、クロムは、いくつかの問題を抱えていますwidth/heightプロパティなしでmin-width/min-heightを定義します。たとえば設定してください。 width:150pxボタンのため、問題が消えていることがわかります。しかし、width:autoを維持したい場合は、クリックイベントを委任し、以下のようにすべての寸法、マウスコードなどを取得することができます：

p.s.私は.rippleのためにpointer-events:none（IE11 +）を追加したので、前の.rippleオブジェクトより次のクリックイベントを発生させることができます。それを削除してその違いをチェックすることができます。

p.s. 2以前の.ripple要素を削除するには、onanimationendイベント（IE10 +）を使用できます。

var links = document.getElementsByTagName('button'); 
 

 
window.addEventListener('click',function(){ 
 
    var wX = event.clientX; 
 
    var wY = event.clientY; 
 

 
    if(event.target.nodeName==="BUTTON"){ 
 
    var button = event.target; 
 
    var getButtonPos = event.target.getBoundingClientRect(); 
 
    var bX = getButtonPos.left; 
 
    var bY = getButtonPos.top; 
 
    var rpl = document.createElement('div'); 
 
    rpl.addEventListener('animationend',function(){ 
 
     this.parentElement.removeChild(this); 
 
    }); 
 
    button.appendChild(rpl); 
 
    var d = Math.max(button.clientWidth, button.clientHeight); 
 
    rpl.style.width = rpl.style.height = d+"px"; 
 
    rpl.style.left = wX - bX - d/2 + "px"; 
 
    rpl.style.top = wY - bY - d/2 + "px"; 
 
    rpl.classList.add('ripple');  
 
    
 
    } 
 
});

/*custom fonts - Bitter, Montserrat*/ 
 
@import url('http://fonts.googleapis.com/css?family=Montserrat|Bitter'); 
 
/*basic reset*/ 
 
* {margin: 0; padding: 0;font-family: arial; box-sizing: border-box} 
 
body { 
 
\t background: #212121; 
 
    display: flex; 
 
    justify-content: center; 
 
    flex-wrap: wrap; 
 
} 
 

 
h1 { 
 
\t text-align: center; padding: 85px 100px; 
 
    color: whitesmoke; 
 
    width: 100%; 
 
    margin: 20px; 
 
} 
 

 
.green {background: limegreen; border: 3px solid limegreen;} 
 
.blue {background: dodgerblue; border: 3px solid dodgerblue;} 
 
.orange {background: orange; border: 3px solid orange;} 
 

 
button { 
 
    min-width: 100px; 
 
    margin: 1%; 
 
    position: relative; 
 
    user-text-select: none; 
 
    border-radius: 4px; 
 
    font-family: arial; 
 
    font-size: 18px; 
 
    cursor: pointer; 
 
    outline: none; 
 
    color: #212121; 
 
    overflow: hidden; 
 
    padding: 18px 30px; 
 
} 
 

 
.ripple { 
 
    position: absolute; 
 
    background: #f5f5f5; 
 
    height: 50px; 
 
    width: 50px; 
 
    border-radius: 50%; 
 
    opacity: 0.5; 
 
    z-index: 3; 
 
    transform: scale(0); opacity: 0.9; 
 
    animation: ripple 3s linear; 
 
    pointer-events: none; 
 
} 
 

 

 
@keyframes ripple { 
 
    to {transform: scale(2.5); opacity: 0;} 
 
}

<h1>Ripple Click Effect</h1> 
 

 
<button class="green">Log in</button> 
 

 
<button class="blue">Sign up</button> 
 

 
<button class="orange">Subscribe to newsletter</button>