fastclick在移动端使用input=“file”上传文件时label中的内容不能触发change事件的bug

2024年5月21日 211次阅读 来源: Kingsley

当我的代码如下的时候

<label for="file" style="display: block; width: 100%;">
          <img style="width:1.20rem;height:1.20rem;border-radius:1.00rem;" :src="user.avatar ? user.avatar : defultPicUrl" />
          <div class="font32 color33" style="margin-top:.30rem;">点击编辑头像</div>
</label>

我发现我点击其他地方可以调用系统的相机以及相册，但是点击头像和文字的时候需要双击才能触发，后来排除原因主要是因为项目中引入了fastclick造成的，后来在issue中找到了答案：
就是加入css属性：pointer-events:none;
这个属性要给label内部的标签加，可以解决这个问题，代码如下

<label for="file" style="display: block; width: 100%;">
          <img style="width:1.20rem;height:1.20rem;border-radius:1.00rem;pointer-events:none;" :src="user.avatar ? user.avatar : defultPicUrl" />
          <div class="font32 color33" style="margin-top:.30rem;pointer-events:none;">点击编辑头像</div>
</label>

这样就解决了这个问题
在此插入关于pointer-events的文档

    原文作者：Kingsley
    原文地址: https://segmentfault.com/a/1190000018813639
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞