阻止长按复制页面中的内容；zepto中touch中的应用必须先加载event模块之后；

时间：2023-11-17 15:08:56

　　

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=yes"/>

     <title>Document</title>

     <style>

         *{margin:0;padding:0;

             -webkit-touch-callout:none;

             -webkit-touch-callout:none;

             -webkit-user-select:none;

             -khtml-user-select:none;

             -moz-user-select:none;

             -ms-user-select:none;

             user-select:none;

         }

         .div1{background: #f45;width:200px;height:200px}

         .delete { display: none; }

         ul{list-style: none}

         li{height:100px;margin-bottom: 20px;background:#f45;line-height: 100px}

         a{background: #00f;display: inline-block;}

     </style>

 </head>

 <body>

 <ul id=items>

     <li>List item 1 <a href=" javascript:void(0)" class=delete>DELETE</a></li>

     <li>List item 2 <a href=" javascript:void(0)" class=delete>DELETE</a></li>

 </ul>

 <script src="http://libs.useso.com/js/zepto/1.1.3/zepto.min.js"></script>

 <script src="http://4.suancai.sinaapp.com/event.js"></script>

 <script src="http://4.suancai.sinaapp.com/touch.js"></script>

 <script>

     window.ontouchstart = function(e) { e.preventDefault(); };

     // show delete buttons on swipe

     $('#items li').swipe(function(){

         $('.delete').hide();

         $('.delete', this).show();

     });

     // delete row on tapping delete button

     $('.delete').tap(function(){

         alert(11)

     })

     $('.delete').longTap(function(){

         $(this).parent('li').remove()

     })

 </script>

 </body>

 </html>

阻止长按复制的事件发生主要由两部分构成；

1.js方面：

     window.ontouchstart = function(e) { e.preventDefault(); };

2.css方面：

*{margin:;padding:;

            -webkit-touch-callout:none;

            -webkit-touch-callout:none;

            -webkit-user-select:none;

            -khtml-user-select:none;

            -moz-user-select:none;

            -ms-user-select:none;

            user-select:none;

        }
相关文章