我有一个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 as the box-shadow被渲染到外部div.
这在触摸设备上尤其是一个问题，因为手指有时不会碰到屏幕的中心。div。 （当然，如果点击在div的50px区域内，它会正常响应。）
是否可以让事件监听器响应点击box-shadow以及实际情况div?
我意识到我可以在按钮顶部使用一个单独的、更大的透明 div 并将事件侦听器附加到它，但是这样的解决方法有必要吗？
（按钮div必须采用以下样式box-shadow。我无法使用border财产或增加padding.)
是的，改变box-shadow to an inset阴影将使阴影占据的区域也可单击。一个inset实际上添加了 box-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版本中，形状的大小将是容器的半径+展开半径。
- 您可能还需要调整一些边距，就像我在下面的示例中所做的那样。
- 添加到阴影的任何模糊现在都将向内应用（也就是说，模糊将与容器的内部而不是主体混合）。我们对此无能为力。
Note: In the above snippet, I have replaced the inline style attribute's contents with CSS.
如果您希望第二个阴影（白色的阴影）向外模糊并与身体背景融合，您可以替换box-shadow with 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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
