Question

为了我的网站允许文件上传，我创建了一个droparea，人们可以拖动和放大删除要上载的多个文件或单击该区域以从磁盘上载单个文件。为此，我有一个隐藏的文件输入作为droparea的叠加层。

我的问题是p-tag占用了droparea中的一些空间，这使得它不再可点击，但让你选择p-tag文本。有关如何使p-tag不可选择并触发点击事件的任何想法，即使您直接点击p-tag文本？

我的代码如下：

<div class="droparea">
  <input type="file" id="upload_input" name="upload"/>
  <p>Drop here or click to select from disk</p>
</div>

CSS：

.droparea {
   width: 30%;
   height: 100px;
   border-style: dashed;
   border-width: 3px;
   border-color: blue;
   float: left;
   text-align: center;
   background-color: #fff;
   font-size: calc(8px + 1vw);
}

.droparea input {
   width: 100%;
   height: 100%;
   font-size: 40px;
   opacity: 0;
   filter:alpha(opacity=0);
   display: block;
   cursor: pointer;
}

.droparea p {
    color: black;
    position: relative;
    top: -80px;
    padding: 0px 1px;
}

Answer 1

纯css的一个可能的解决方案是pointer-events: none;

.droparea p {
pointer-events: none;
}

指针事件CSS属性指定在什么情况下（如果任何）特定的图形元素可以成为鼠标的目标事件

为了获得更好的浏览器支持，您可以使用这两个polyfill

防止HTML文本扭曲可点击的叠加层

1 个答案: