是否可以在响应点击事件的div区域中包含box-shadow? [英] Is it possible to include the box-shadow in the div area that responds to a click event?
问题描述
我有一个 div
充当一个圆形按钮。它的样式使其整体外观的很大一部分来自 box-shadow
:
< body style =background:black>< div id =buttonstyle =width:50px; height:50px; background:yellow; border:none; border-radius:50px; shadow:0 0 0 5px#c03,0 0 2px 7px #fff>< / div>< / body>
我有一个点击事件监听器连接到按钮
div
。不幸的是,如果div
被点击box-shadow
作为box-shadow
在div
之外。
触摸设备上手指有时不会碰到
div
的中心。 (当然,如果点击在div的50像素区域内,它会正常响应。)
可以使事件监听器响应
box-shadow
以及实际的div
?
可以在按钮的顶部使用一个单独的和更大的透明div,并附加事件监听器,但是这是一个必要的解决方法吗?
(按钮
div
必须使用box-shadow
设定样式我不能使用border
属性或增加padding 。)
解决方案
box-shadow
到插入
阴影将使阴影占据的区域也可以单击。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;} / *只是用于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
版本中,形状的大小将是容器的半径+展开半径。 - 添加到阴影中的任何模糊现在将向内应用(即,模糊将与内部部分混合)容器而不是主体)。
注意:在上述代码段中,
如果你想要第二个阴影(白色的)向外模糊并与身体背景混合,可以用 radial-gradient
替换 box-shadow
在下面的示例中。但是,使用 radial-gradient
有两个缺点,一个是较低的浏览器支持,另一个是当元素的大小很小时,曲线不是很平滑。 p>
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%;背景图像:径向梯度(在50%50%,透明57.5%,#c03 57.5%,#c03 65%,#fff 65%,透明72%的圆);}#button-2 {height:150px; width:150px; border:none; border-radius:50%;背景图像:径向梯度(圆50%50%,透明57.5%,#c03 57.5%,#c03 65%,#fff 65%,透明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>
I have a div
acting as a round button. It is styled so that a significant part of its overall appearance comes from a 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>
I have a click event listener attached to the button div
. Unfortunately, it doesn't respond if the div
is clicked on the box-shadow
as the box-shadow
is rendered outside the div
.
This is particularly a problem on touch devices where the finger sometimes doesn't hit the center of the div
. (Of course, it responds normally if the click is within the div's 50px area.)
Is it possible to make the event listener respond to clicks on the box-shadow
as well as the actual div
?
I realise I can use a separate and larger transparent div over the top of the button and attach the event listener to that, but is such a workaround necessary?
(The button div
must be styled with box-shadow
. I can't use the border
property or increase padding
.)
Yes, changing the box-shadow
to an inset
shadow will make the area occupied by the shadow also clickable. An inset
box-shadow is actually added within the element and hence even a click on the shadow is treated as a click on the 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 -->
The following are some points that need to be considered while changing the shadow to an inset one:
- Since the
box-shadow
is added inside, the height and width of thediv
should be increased by a bit to make sure the final outcome is the same size as your original version. In the normalbox-shadow
version, the size of the shape would be the container's radius + spread radius. - You may also have to adjust some margins like I have done in the sample below.
- Any blur that is added to the shadow will now be applied inwards (that is, the blur will blend with the inner part of the container and not the body). We can do nothing about this.
Note: In the above snippet, I have replaced the inline style attribute's contents with CSS.
If you want the second shadow (the white colored one) to blur towards the outside and blend with the body background, you could replace the box-shadow
with radial-gradient
like in the below sample. But there are two drawbacks of using radial-gradient
, one is it has lower browser support and second is the curves are not very smooth when the element's size is very small.
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>
这篇关于是否可以在响应点击事件的div区域中包含box-shadow?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!