fastclick在移動端使用input=「file」上傳文件時label中的內容不能觸發change事件的bug

當個人代碼以下的時候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

相關文章
相關標籤/搜索