是否可以在响应点击事件的div区域中包含box-shadow？ [英] Is it possible to include the box-shadow in the div area that responds to a click event?

查看：465
本文介绍了是否可以在响应点击事件的div区域中包含box-shadow？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个 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 the div should be increased by a bit to make sure the final outcome is the same size as your original version. In the normal box-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屋！
查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆