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

Question

为了让我的网站允许文件上传，我创建了一个拖放区域，人们可以在其中拖放多个文件进行上传，或者单击该区域以从磁盘上传单个文件。为此，我有一个隐藏的文件输入，充当拖放区域的叠加层。

我的问题是 p 标签在拖放区域内占用了一些空间，这使得它不再可点击，但可以让您选择 p 标签文本。任何想法如何使p标签不可选择并触发点击事件，即使您直接点击p标签文本？

我的代码如下所示：

<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 属性指定在什么情况下(如果 any(特定的图形元素可以成为鼠标的目标 事件。

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

1. https://github.com/jquery/PEP
2. https://github.com/kmewhort/pointer_events_polyfill