移動端h5長按刪除效果
阿新 • • 發佈：2019-01-24
貼上到html即可看到效果，用於移動端長按刪除
<body> <div class="butlong" style="position:relative;"> <input type="button" value="長按刪除" class="delete"/> <a style="position:absolute; left:90px; top:0; color:red; display:none;" class="deletefont">刪除</a> </div> </body> <script src="js/zepto.min.js"></script> <script type="text/javascript"> // 長按 $.fn.longPress = function(fn) { var timeout = undefined; var $this = this; for(var i = 0;i<$this.length;i++){ $this[i].addEventListener('touchstart', function(event) { timeout = setTimeout(function(e){ $('.deletefont').show(); }, 800); //長按時間超過800ms，則執行傳入的方法 }, false); $this[i].addEventListener('touchend', function(event) { clearTimeout(timeout); //長按時間少於800ms，不會執行傳入的方法 }, false); } } $('.delete').longPress(function(e){ }); $('.deletefont').on('touchend',function(){ $('.delete').remove(); $('.deletefont').remove(); })
攻城獅部落格不定期更新
，有錯誤會及時更正如有不同見解，請在下方評論。。。
如有錯誤、後續更正。