当个人代码以下的时候css
<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内部的标签加,能够解决这个问题,代码以下html
<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的文档code