Question

我有一个<button>元素，我希望有一个3D效果。为了创建3D效果，我在按钮上添加了box-shadow，当单击按钮时，box-shadow关闭，我给它一个相对位置以产生被按下的效果down（你可以从下面的codepen中获得更好的想法）。

我还需要使用按钮的点击事件来触发一些javascript。问题是，如果用户点击按钮顶部附近，则永远不会触发点击事件，因为一旦应用了相对位置，用户点击的点（点击时按钮上的点）是现在位于按钮上方，因此没有注册任何点击。

我真的很难过，我找不到办法让这个工作，所以我真的很感激一些帮助。谢谢！

这是link to the codepen。

Answer 1

尝试将按钮的内容包装在span中，并操作以使按钮的实际位置不会发生变化。

var button = document.querySelector('button');

button.addEventListener('click',function(){
  console.log('The button was clicked');
});

button {
  background-color: transparent;
  border: none;
}

button span {
  background-color: lightblue;
  padding: 1em;
  display: block;
  margin: 0 auto;
  border-radius: 10px;
  box-shadow: 0 0.5em skyblue;
}

button:active span {
  position: relative;
  top: 0.5em;
  box-shadow: none;
}

<button><span>Click Me</span></button>

单击相对定位元素的原始位置上的事件

1 个答案: