touch事件（按下显示，松开消失）

78 阅读 0 评论 52 点赞

我是靠谱客的博主坦率服饰，最近开发中收集的这篇文章主要介绍touch事件（按下显示，松开消失），觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
</head>
<body>
<div style="width:100%;">
<div id="touchArea" style="width:90%; height:200px; background-color:#CCC;font-size:100px">
长按我</div>
<div class="showArea" style="width:90%; height:100px; background-color:red;font-size:100px;display: none"></div>
</div>
<script>
var timeOutEvent=0;
$(function(){
$(document).click(function(){
$(".showArea").css("display","none");
})
$("#touchArea").on({
touchstart: function(e){
timeOutEvent = setTimeout("longPress()",500);
e.preventDefault();
return false;
},
touchmove: function(){
clearTimeout(timeOutEvent);
timeOutEvent = 0;
},
touchend: function(e){
clearTimeout(timeOutEvent);
timeOutEvent = ShortLeave();
e.preventDefault();
return false;
}
})
});
function longPress(){
timeOutEvent = 0;
$(".showArea").css("display","block");
}
function ShortLeave(){
timeOutEvent = 0;
$(".showArea").css("display","none");
}
</script>
</body>
</html>

touch 和 click事件的相关冲突

点击打开链接

问题：有touch 就没有了 click功能，解决方法：去掉e.preventDefault();
return false;

最后

以上就是坦率服饰为你收集整理的touch事件（按下显示，松开消失）的全部内容，希望文章能够帮你解决touch事件（按下显示，松开消失）所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。

本文分类：HTML5+CSS3
浏览次数：78 次浏览
发布日期：2023-10-31 16:30:41
本文链接：https://www.kaopuke.com/article/k-p-k_13_u_23_o_18_f1_13__23_k5.html

touch事件（按下显示，松开消失）

概述

最后

评论列表共有 0 条评论

发表评论取消回复

touch事件（按下显示，松开消失）

概述

最后

相关文章

评论列表共有 0 条评论

发表评论 取消回复

发表评论取消回复