js 长按事件、点击事件！

最新推荐文章于 2025-03-11 09:24:55 发布

Vancyf

最新推荐文章于 2025-03-11 09:24:55 发布

阅读量8.7k

点赞数

分类专栏： js

本文链接：https://blog.youkuaiyun.com/vancyf/article/details/102701692

版权

js 专栏收录该内容

4 篇文章

订阅专栏

本文探讨了JavaScript中的长按事件和点击事件，详细解释了如何使用JavaScript实现长按和点击功能，包括相关HTML、CSS和JS代码示例。

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

html代码

<img class="move" src="./1.jpg">
<div class="movebg"></div>

css代码

.move{
	display: block;
	width: 100%;
}
.movebg{
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	opacity: 0.2;
	background-color: #000000;
	z-index: 21;
	display: none;
}

js代码

$(function(){
    var self = this;
	var longClick =0;
	var minilongClick =0;
	$(".move").on({
	    touchstart: function(e){
			        longClick=0;//设置初始为0
			        timeOutEvent = setTimeout(function(){
			            //此处为长按事件-----在此显示遮罩层及删除按钮
			            longClick=1;//假如长按，则设置为1
			            $(".move").css("position","fixed");
			            $(".move").css("top","10%");
			            $(".move").css("left","10%");
			            $(".move").css("width","80%");
			            $(".move").css("z-index","22");
			            $(".movebg").show();
			            // $(".movemini").show();
			        },500);
			    },
			    touchmove: function(){
			        clearTimeout(timeOutEvent);
			        timeOutEvent = 0;
			        e.preventDefault();
			    },
			    touchend: function(e){
			        clearTimeout(timeOutEvent);
			        if(timeOutEvent!=0 && longClick==0){//点击
			            //此处为点击事件----在此处添加跳转详情页
			            
			        }else{
			        	$(".move").css("position","absolute");
			            $(".move").css("top","0");
			            $(".move").css("left","0");
			            $(".move").css("width","100%");
			            $(".move").css("z-index","1");
			            $(".movebg").hide();
			        }
			        return false;
			    }
			});
		})