3

我有一个div充当圆形按钮。它的样式使其整体外观的很大一部分来自box-shadow：

<body style="background:black">
<div id="button" style="width: 50px; height: 50px; background: yellow; border: none; border-radius: 50px; box-shadow: 0 0 0 5px #c03, 0 0 2px 7px #fff"></div>
</body>

我有一个附加到按钮的单击事件侦听器div。div不幸的是，如果单击，它不会响应，因为box-shadow它box-shadow在div.

这在手指有时不会碰到div. （当然，如果点击在 div 的 50px 区域内，它会正常响应。）

是否可以让事件侦听器响应点击box-shadow以及实际点击div？

我意识到我可以在按钮顶部使用一个单独且更大的透明 div 并将事件侦听器附加到该按钮上，但是这样的解决方法是否必要？

（按钮div的样式必须是box-shadow。我不能使用该border属性或增加padding。）

4

1 回答 1

2

是的，将 更改box-shadow为inset阴影将使阴影占据的区域也可点击。insetbox-shadow 实际上是在元素中添加的，因此即使单击阴影也会被视为单击div.

window.onload = function() {
  var btn = document.querySelector("#button");
  var btnOriginal = document.querySelector("#button-original");

  btn.addEventListener("click", function() {
    alert("I have been clicked");
  });
  btnOriginal.addEventListener("click", function() {
    alert("I have been clicked");
  });
}
#button {
  width: 64px;
  height: 64px;
  border: none;
  border-radius: 50px;
  box-shadow: inset 0 0 2px 2px #fff, inset 0 0 0 7px #c03;
}
#button-original {
  width: 50px;
  height: 50px;
  border: none;
  border-radius: 50px;
  box-shadow: 0 0 0 5px #c03, 0 0 2px 7px #fff;
}

/* Just for demo */

#button {
  margin: 10px;
}
#button-original {
  margin: 17px;
}
div:hover {
  cursor: pointer;
}
body{
  background: black;
<div id="button"></div><!-- modified version -->

<div id="button-original"></div><!-- original version -->

以下是在将阴影更改为插图时需要考虑的几点：

  • 由于在box-shadow里面添加了，所以div应该增加一点的高度和宽度，以确保最终结果与原始版本的大小相同。在普通box-shadow版本中，形状的大小将是容器的半径 + 散布半径。
  • 您可能还需要调整一些边距，就像我在下面的示例中所做的那样。
  • 添加到阴影的任何模糊现在都将向内应用（也就是说，模糊将与容器的内部混合，而不是与主体混合）。我们对此无能为力。

注意：在上面的代码片段中，我用 CSS 替换了内联样式属性的内容。

如果您希望第二个阴影（白色阴影）向外部模糊并与身体背景混合，您可以在下面的示例中替换为类似的box-shadow。radial-gradient但是使用 有两个缺点radial-gradient，一是浏览器支持较低，二是当元素非常小时，曲线不是很平滑。

window.onload = function() {
  var btn = document.querySelector("#button");
  var btn2 = document.querySelector("#button-2");

  btn.addEventListener("click", function() {
    alert("I have been clicked");
  });
  btn2.addEventListener("click", function() {
    alert("I have been clicked");
  });
}
#button {
  width: 75px;
  height: 75px;
  border: none;
  border-radius: 50%;
  background-image: radial-gradient(circle at 50% 50%, transparent 57.5%, #c03 57.5%, #c03 65%, #fff 65%, transparent 72%);
}
#button-2 {
  height: 150px;
  width: 150px;
  border: none;
  border-radius: 50%;
  background-image: radial-gradient(circle at 50% 50%, transparent 57.5%, #c03 57.5%, #c03 65%, #fff 65%, transparent 72%);
}
div:hover {
  cursor: pointer;
}
body {
  background: black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div id="button"></div>
<div id="button-2"></div>

于 2015-07-10T06:17:36.543 回答