HTML5-长按事件

最新推荐文章于 2024-05-08 13:24:57 发布
最新推荐文章于 2024-05-08 13:24:57 发布
阅读量3.2w 收藏 9
点赞数 1
分类专栏： HTML5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yqj234/article/details/51923626
版权 




<!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>
<script>
var timeOutEvent=0;
$(function(){
	$("#touchArea").on({
		touchstart: function(e){
			timeOutEvent = setTimeout("longPress()",500);
		 	e.preventDefault();
		},
		touchmove: function(){
            		clearTimeout(timeOutEvent); 
		    	timeOutEvent = 0; 
		},
		touchend: function(){
	   		clearTimeout(timeOutEvent);
			if(timeOutEvent!=0){ 
			    alert("你这是点击，不是长按"); 
			} 
			return false; 
		}
	})
});

 
function longPress(){ 
    timeOutEvent = 0; 
    alert("长按事件触发发"); 
} 

</script>
</body>
</html>


yqj234
关注
  • 1
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
专栏目录
html手机页面长按事件,移动端html5模拟长按事件的实现方法
weixin_28843015的博客
06-03 740
为啥写这篇文章最近接了个需求，要求长按某个标签显示删除一个悬浮的删除按钮。这个需求其实在app上很常见，但是在移动端h5中，我们没有长按的事件，所以就需要自己模拟这个事件了。大概效果如下：ps: 为了做个gif还下了app，还得通过邮件发到电脑上，脑瓜疼。。思路放弃click事件，通过判断按的时长来决定是单击还是长按使用touchstart和touchend事件在touchstart中开启一个定时...
html 长按事件 坐标,HTML5-长按事件
weixin_32491255的博客
06-07 211
长按我var timeOutEvent=0;$(function(){$("#touchArea").on({touchstart: function(e){timeOutEvent = setTimeout("longPress()",500);e.preventDefault();},touchmove: function(){clearTimeout(timeOutEvent);timeOu...
vue使用自定义指令实现长按事件（适用于h5，pc）
最新发布
wangxiaoyanlike的博客
05-08 993
/ 自定义指令长按触发回调函数// 定义变量// 创建计时器（ 2秒后执行函数 ）== 0) {return}, 1000)// 取消计时器== null) {// 运行函数// 传递item参数// 添加事件监听器el.addEventListener('touchstart', start)//在移动端要考虑 touchstart，touchend 事件// 取消计时器。
html5游戏长按事件,html5长按事件
weixin_36269733的博客
05-31 125
Item 1Item 2Item 3mui.init({gestureConfig:{tap: true, //默认为truedoubletap: true, //默认为falselongtap: true, //默认为falseswipe: true, //默认为truedrag: true, //默认为truehold:false,//默认为false，不监听release:false//默认...
vue---长按事件和点击事件冲突的问题
weixin_47011763的博客
07-28 2476
关于vue长按事件和点击事件冲突的问题 使用场景：在使用vue做移动端开发时，遇到了长按事件和点击事件冲突的问题。 具体需求：点击标签时选中标签，再次点击时取消选择，因标签名称过长，长按标签使用tooltip显示完整标签名称。 代码说明 HTML部分 <div v-for="(item, index) in List" class="flex a-center j-center" > <van-tag v-if="!item.selected"
html5 判断长按操作,移动端h5模拟长按事件
weixin_39933414的博客
07-02 798
1、标志位var timer = '';var isLongTouch = false; // 加个标志位，防止settimeout因为事件循环和实际时间有偏差var target= document.getElementById('target');target.addEventListener('touchstart', function () {timer = setTimeout(func...
html5长按事件多久,移动端h5模拟长按事件
weixin_29084231的博客
06-09 599
为啥写这篇文章最近接了个需求，要求长按某个标签显示删除一个悬浮的删除按钮。这个需求其实在app上很常见，但是在移动端h5中，我们没有长按的事件，所以就需要自己模拟这个事件了。大概效果如下：ps: 为了做个gif还下了app，还得通过邮件发到电脑上，脑瓜疼。。思路放弃click事件，通过判断按的时长来决定是单击还是长按使用touchstart和touchend事件在touchstart中开启一个定时...
html5游戏长按事件,移动端html5模拟长按事件的实现方法
weixin_34451330的博客
05-31 122
为啥写这篇文章最近接了个需求，要求长按某个标签显示删除一个悬浮的删除按钮。这个需求其实在app上很常见，但是在移动端h5中，我们没有长按的事件，所以就需要自己模拟这个事件了。大概效果如下：ps: 为了做个gif还下了app，还得通过邮件发到电脑上，脑瓜疼。。思路放弃click事件，通过判断按的时长来决定是单击还是长按使用touchstart和touchend事件在touchstart中开启一个定时...
H5移动端 利用touchstart 达到长按事件
jjhkfgh的博客
12-14 1793
H5移动端 利用touchstart 达到长按事件
html 模拟长按,移动端html5模拟长按事件的实现方法
weixin_36332642的博客
06-05 280
为啥写这篇文章最近接了个需求，要求长按某个标签显示删除一个悬浮的删除按钮。这个需求其实在app上很常见，但是在移动端h5中，我们没有长按的事件，所以就需要自己模拟这个事件了。大概效果如下：ps: 为了做个gif还下了app，还得通过邮件发到电脑上，脑瓜疼。。思路放弃click事件，通过判断按的时长来决定是单击还是长按使用touchstart和touchend事件在touchstart中开启一个定时...
HTML5-注册页面(移动端和电脑端)
yqj234的专栏
08-19 3095
无标题文档 用戶注冊(每项必填) 推荐人
HTML5-按鈕特效及源代碼
yqj234的专栏
08-20 906
按鈕動事製作 http://netsmell.com/post/css3-animation-sniplet.html#/
H5 ＜blockquote＞ 标签
yqj234的专栏
09-17 548
blockquote> 标签定义摘自另一个源的块引用。浏览器通常会对 元素进行缩进。
CSS-相對于父元素絕對定位
yqj234的专栏
08-05 532
要實現字元素相對定位：原則          父級相對定位，子級絕對定位
HTML5-FORM(支持移動端和電腦端)
yqj234的专栏
08-18 282
用戶注冊                                                                                                     帳號
BootStrap-學習網址
yqj234的专栏
08-19 276
基本樣式使用，寫得非常詳細，值得一看！ http://caibaojian.com/bootstrap/base-css.html#typography
jquery-切換
yqj234的专栏
08-20 266
$(document).ready(function(){   $(".btn1").click(function(){   $("p").toggle(1000);   }); }); This is a paragraph. Toggle
uniapp中h5能使用的长按事件和结束事件
05-15
在 H5 中，可以使用以下事件来实现长按和结束事件： 1. `touchstart`：当手指触摸屏幕时触发。 2. `touchmove`：当手指在屏幕上滑动时连续触发。 3. `touchend`：当手指离开屏幕时触发。 4. `touchcancel`：当系统停止跟踪触摸时触发，如手指碰到屏幕边缘或系统中断事件。 通过监听 `touchstart` 和 `touchend` 事件，可以实现长按和结束事件的逻辑。当用户开始按下按钮时，记录当前时间，当手指离开屏幕时，再次记录时间并计算时间差，若时间差大于一定的时间阈值，则认为触发了长按事件。 以下是一个实现长按和结束事件的示例代码： ```html <template> <div @touchstart="onTouchStart" @touchend="onTouchEnd">{{ message }}</div> </template> <script> export default { data() { return { message: '请长按按钮', touchStartTime: 0, touchEndTime: 0, longPressTime: 1000 // 长按时间阈值，单位毫秒 } }, methods: { onTouchStart() { this.touchStartTime = new Date().getTime() this.message = '已按下，请继续按住' this.longPressTimer = setTimeout(() => { this.message = '长按事件触发' }, this.longPressTime) }, onTouchEnd() { this.touchEndTime = new Date().getTime() clearTimeout(this.longPressTimer) if (this.touchEndTime - this.touchStartTime < this.longPressTime) { this.message = '已结束' } } } } </script> ```
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值