1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=yes"/> 6 <title>Document</title> 7 <style> 8 *{margin:0;padding:0; 9 -webkit-touch-callout:none; 10 -webkit-touch-callout:none; 11 -webkit-user-select:none; 12 -khtml-user-select:none; 13 -moz-user-select:none; 14 -ms-user-select:none; 15 user-select:none; 16 17 } 18 .div1{background: #f45;width:200px;height:200px} 19 .delete { display: none; } 20 ul{list-style: none} 21 li{height:100px;margin-bottom: 20px;background:#f45;line-height: 100px} 22 a{background: #00f;display: inline-block;} 23 </style> 24 </head> 25 <body> 26 27 <ul id=items> 28 <li>List item 1 <a href=" javascript:void(0)" class=delete>DELETE</a></li> 29 <li>List item 2 <a href=" javascript:void(0)" class=delete>DELETE</a></li> 30 </ul> 31 <script src="http://libs.useso.com/js/zepto/1.1.3/zepto.min.js"></script> 32 <script src="http://4.suancai.sinaapp.com/event.js"></script> 33 <script src="http://4.suancai.sinaapp.com/touch.js"></script> 34 <script> 35 window.ontouchstart = function(e) { e.preventDefault(); }; 36 // show delete buttons on swipe 37 $('#items li').swipe(function(){ 38 $('.delete').hide(); 39 $('.delete', this).show(); 40 }); 41 42 // delete row on tapping delete button 43 $('.delete').tap(function(){ 44 alert(11) 45 }) 46 $('.delete').longTap(function(){ 47 $(this).parent('li').remove() 48 }) 49 </script> 50 </body> 51 </html>
阻止长按复制的事件发生主要由两部分构成；
1.js方面：
1 window.ontouchstart = function(e) { e.preventDefault(); };
2.css方面：
*{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; }