img {
-webkit-touch-callout: none;
pointer-events: none;
/* // 像微信瀏覽器還是無法禁止，加上這行樣式即可 */
}
/* // 禁止長按選擇文字 */
div {
-webkit-user-select: none;
}
/* // 禁止長按呼出菜單 */
div {
-webkit-touch-callout: none;
}
<!-- 撥號 --> <a href="tel:10086">打電話給: 10086</a> <!-- 發送短信 --> <a href="sms:10086">發短信給: 10086</a> <!-- 發送郵件 --> <a href="mailto:839626987@qq.com">發郵件給：839626987@qq.com</a> <!-- 選擇照片或者拍攝照片 --> <input type="file" accept="image/*"> <!-- 選擇視頻或者拍攝視頻 --> <input type="file" accept="video/*"> <!-- 多選 --> <input type="file" multiple> <a href="weixin://">打開微信</a> <a href="alipays://">打開支付寶</a> <a href="alipays://platformapi/startapp?saId=10000007">打開支付寶的掃一掃功能</a> <a href="alipays://platformapi/startapp?appId=60000002">打開支付寶的螞蟻森林</a>
<!-- 有"#" "*"符號輸入 --> <input type="tel"> <!-- 純數字 --> <input pattern="\d*">
彈窗滑動穿透
<style> .mask { position: fixed; top: 0; left: 0; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; background-color: #f00; } .content { padding: 20px; background-color: #fff; width: 300px; } </style> <body> <div class="mask"> <div class="content">我是彈框</div> </div> document.querySelector(".mask").addEventListener("touchmove", event => { event.preventDefault(); }); 復制代碼如果在vue中，你可以這么寫： <div class="mask" @touchumove.prevent></div> 復制代碼如果.content也有滾動條，那么只要阻止遮罩本身就行： document.querySelector(".mask").addEventListener("touchmove", event => { if (event.target.classList.contains("mask")) event.preventDefault(); }); 復制代碼或者： <div class="mask" @touchumove.self.prevent></div>