移动端，禁止图片长按等。。。

本文转载自查看原文 2019-10-09 14:47 527

  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>

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 移动端H5页面禁止长按保存图片,禁止长按选个文本 h5移动端禁止长按图片保存微信浏览器返回刷新，监听微信浏览器返回事件，网页防复制，移动端禁止图片长按和vivo手机点击img标签放大图片移动端 css 禁止长按屏幕选中移动端web禁止长按选择文字以及弹出菜单 h5页面转图片长按保存移动端长按事件关于小程序图片长按保存及小程序分享小程序图片长按识别功能的实现移动端长按事件