为什么绝对定位忽略顶部填充而不是左边填充？

Question

所以我试图让你的咔嗒声出现在你点击的地方，但它似乎把它放在右边，无论填充物有多少像素。谁知道为什么？

此外，如果有人知道一些好的方法来删除div，一旦他们不再使用那将是伟大的：）

＆＃13;

＆＃13;

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

function ripple(e) {
	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){
	b.addEventListener('click',ripple);
});

＆＃13;

/*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 {
	background: #212121;
  display: flex; 
  justify-content: center;
  flex-wrap: wrap;
}

h1 {
	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;}
}

＆＃13;

<h1>Ripple Click Effect</h1>

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

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

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

是的，当你只定义没有宽度/高度属性的min-width / min-height时，chrome有一些问题。尝试设置例如。按钮width:150px，您就会发现问题消失了。但是，如果您想保留width:auto，可以尝试委托点击事件并获取所有尺寸，鼠标坐标等，如下所示：

P.S。我还为pointer-events:none添加了.ripple（IE11 +），以便能够在之前的.ripple对象上触发下一次点击事件。您可以将其删除并查看差异。

P.S。 2要删除以前的.ripple元素，可以使用onanimationend事件（IE10 +）。

＆＃13;

＆＃13;

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');    
    
  }
});

＆＃13;

/*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 {
	background: #212121;
  display: flex; 
  justify-content: center;
  flex-wrap: wrap;
}

h1 {
	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;}
}

＆＃13;

<h1>Ripple Click Effect</h1>

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

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

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

＆＃13;

＆＃13;

＆＃13;