代码之家 › 专栏 › 技术社区 › eeze

在相对位置元素的原始位置单击事件[关闭]

css html javascript

eeze · 技术社区 · 6 年前

我有一个 <button> 元素,我想有一个三维效果。为了创建三维效果,我添加了 box-shadow 当点击按钮时, 盒阴影 关闭,我给它一个相对的位置,让它产生被按下的效果(你可以从下面的代码笔得到更好的想法)。

我还需要使用按钮的click事件来触发一些javascript。问题是,如果用户在按钮顶部附近单击,则不会触发单击事件,因为一旦应用了相对位置,用户单击的位置(在单击按钮时位于按钮上)现在位于按钮上方,因此不会注册单击。

我真的被这件事难住了,我找不到办法让它起作用,所以我真的很感谢你的帮助。谢谢!

这是一个 link to the codepen .

1 回复 | 直到 6 年前

mfluehr fermar 6 年前

尝试用 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;
}