移动端h5长按删除效果

最新推荐文章于 2024-11-25 06:13:33 发布

不宅的程序园

最新推荐文章于 2024-11-25 06:13:33 发布

阅读量1w

点赞数 3

CC 4.0 BY-SA版权

分类专栏：常用方法总结文章标签：移动端长按删除 jquery长按删除 js长按删除长按删除

本文链接：https://blog.youkuaiyun.com/zyz_3362/article/details/52442522

常用方法总结专栏收录该内容

27 篇文章

订阅专栏

这篇博客探讨了如何在移动端H5页面中实现长按删除的效果，使用了jQuery和JavaScript技术，适用于移动端交互优化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

粘贴到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();
})

攻城狮博客不定期更新，有错误会及时更正如有不同见解，请在下方评论。。。