解决文件上传Droparea中P标签干扰点击事件的问题

你的问题核心在于两点：一是<p>标签的文本能被选中，二是点击<p>区域时没触发隐藏的file input点击事件。这是因为<p>通过相对定位覆盖在了input上方，默认会拦截鼠标事件，同时文本默认支持选中。下面给你两种解决方案，轻松搞定这两个问题：

方法一：纯CSS方案（推荐，无需JS） #

直接修改.droparea p的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);
  /* 新增：让内部定位更稳定 */
  position: relative;
}

.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;
  /* 新增属性 */
  user-select: none; /* 禁止文本选中 */
  -webkit-user-select: none; /* 兼容webkit内核浏览器（如Chrome、Safari） */
  -moz-user-select: none; /* 兼容火狐 */
  pointer-events: none; /* 让点击事件穿透到下方的input */
}

原理说明： #

• user-select: none：直接禁用文本选中功能，用户再也选不到<p>里的文字。
• pointer-events: none：让<p>元素完全不响应任何鼠标事件，点击<p>区域时，事件会自动传递给下方的file input，触发文件选择框。

方法二：JS辅助方案（备用） #

如果因为某些限制不能用pointer-events: none，可以给<p>绑定点击事件，手动触发input的点击：

首先给<p>加个ID方便选择：

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

然后添加JS代码：

document.getElementById('upload_tip').addEventListener('click', function() {
  document.getElementById('upload_input').click();
});

同时别忘了给<p>加上禁止文本选中的CSS：

.droparea p {
  /* 原有属性 */
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
}

两种方案都能解决你的问题，纯CSS方案更简洁高效，优先推荐使用。修改后你的Droparea就能正常工作：文本无法选中，点击任何区域（包括<p>的文本部分）都会触发文件选择框，拖拽功能也不受影响。

内容的提问来源于stack exchange，提问作者12dollar