手机端触摸touchmove 关闭默认事件和打开默认事件

最新推荐文章于 2021-12-17 11:08:06 发布

原创最新推荐文章于 2021-12-17 11:08:06 发布 · 4.9k 阅读

3 ·

CC 4.0 BY-SA版权

js 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用JavaScript管理触屏设备上的默认行为，包括关闭和恢复浏览器默认事件，如页面滚动和滑动等，适用于需要控制浏览器交互的应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width">
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <title>js默认关闭和恢复</title>
    <style>
        body{
            background-color: #f1f1f1;
            color: blue;
        }
        button{
            height: 40px;
            margin: 10px;
            display: inline-block;
            padding: 10px;
        }
        section{
            line-height: 24px;

        }
    </style>
</head>
<body id="body">       
    <main  style="height: 10000px;">


        <article>
            <section style=" text-align: center; position: fixed; left: 0; bottom: 10px; height: 50px; width: 100%;background-color: #f1f1f1;">
                <button onclick="defaultOff()">关闭默认事件</button>
                <button onclick="defaultOn()">恢复默认事件</button>
            </section>
            <section>
                此应用场景，多应用于弹出层显示时，关闭默认事件，阻止浏览器滚动及滑动，但是关闭弹出层是默认事件就需要恢复了
            </section>
            <section>当关闭默认事件，页面滚动和滑动以及浏览器自动的事件都将被取消</section>
            <section>当开启默认事件，浏览器恢复默认事件</section>
        </article>
    </main>
    <script>
        function defaultOff() {
            alert("浏览器不能滚动啦");
            document.getElementById("body").addEventListener("touchmove", function (e) {
                    e.preventDefault();
            });
        }
        function defaultOn() {
             alert("浏览器又可以滚动了");
            document.getElementById("body").addEventListener("touchmove", function (event) {
                event.returnValue = true;  
            });
        }
    </script>
</body>