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

  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>

 

posted @ 2019-10-09 14:47  十一AAA  阅读(1561)  评论(1)  编辑  收藏  举报
这是页脚