1 <!DOCTYPE HTML>2 <HTMLLang= "en">3 <Head>4 <MetaCharSet= "UTF-8">5 <MetaID= "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;Ten -webkit-touch-callout:None; One -webkit-user-select:None; A -khtml-user-select:None; - -moz-user-select:None; - -ms-user-select:None; the 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 a{background:#00f;Display:Inline-block;} at </style> - </Head> - <Body> - - <ulID=items> - <Li>List Item 1<ahref= "javascript:void (0)"class=delete>DELETE</a></Li> in <Li>List Item 2<ahref= "javascript:void (0)"class=delete>DELETE</a></Li> - </ul> to <Scriptsrc= "Http://libs.useso.com/js/zepto/1.1.3/zepto.min.js"></Script> + <Scriptsrc= "Http://4.suancai.sinaapp.com/event.js"></Script> - <Scriptsrc= "Http://4.suancai.sinaapp.com/touch.js"></Script> the <Script> * Window.ontouchstart= function(e) {E.preventdefault ();}; $ //Show Delete buttons on swipePanax Notoginseng $('#items Li'). Swipe (function(){ - $('. Delete'). Hide (); the $('. Delete', This). Show (); + }); A the //Delete Row on tapping Delete button + $('. Delete'). Tap (function(){ - Alert ( One) $ }) $ $('. Delete'). Longtap (function(){ - $( This). Parent ('Li'). Remove () - }) the </Script> - </Body>Wuyi </HTML>
The event that prevents a long press copy is mainly composed of two parts;
1.js aspect:
1 function (e) {E.preventdefault ();};
2.css aspect:
* {margin : ; 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 ; }
Prevents long presses from copying the contents of the page; the app in Zepto touch must first load the event module;