手機端觸控touchmove 關閉預設事件和開啟預設事件
阿新 • • 發佈：2019-01-25
<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>