移动端的长按事件

  • 代码

    <!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>

  • 效果

    1. 点击

    2. 长按

时间： 2024-10-27 10:03:29

移动端的长按事件的相关文章

移动端的长按事件的实现

代码 <!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>

h5移动端阻止浏览器长按事件

移动端长按图片或者元素的时候会出现默认的浏览器事件,这样会影响自定义的长按行为,很麻烦.微信的图片和元素的长按事件效果如下 找到了一个方式去掉首先要把图片放到div的背景图片中(用图片试了不行,如果有大神可以指点下),这样再长按的时候长按的是DIV 代码如下,注意引jQuery //长按触发事件 $.fn.longLongPress = function () { var div = $(this); $(this).on({ touchstart: function(e){ console.l

屏蔽移动端浏览器的长按事件

最近做了一个图片阅后即焚的网页在移动端浏览,过程是按住屏幕并移动时,图片会慢慢展示,松开手时图片立即粉碎消失. 但是长按图片时会触发浏览器自带的长按事件,从网上搜索得知有以下两种方法: 1.添加事件   ontouchstart = "return false;" 2.css统一加上 -webkit-user-select:none; -webkit-touch-callout:none; 但是上述方法对页面的其他需求有影响,最终我采用的方法是,写一个空的透明的DIV置于页面最上层遮住

vue中的长按事件和点击事件冲突

<div> <img src="/static/images/poi-marker-default.png" @touchstart.prevent="touchin()" @touchend.prevent="clickhandle()" > </div> data() { return { Loop:0 } }, methods: { touchin(index){ // 长按事件,按住后等待指定事件触发

移动端与PC端的触屏事件

由于移动端是触摸事件,所以要用到H5的属性touchstart/touchmove/touched,但是PC端只支持鼠标事件,所以此时可以这样转换 var touchEvents = { touchstart: "touchstart", touchmove: "touchmove", touchend: "touchend", /** * @desc:判断是否pc设备,若是pc,需要更改touch事件为鼠标事件,否则默认触摸事件 */ init

触发UIButton长按事件

UIButton *aBtn=[UIButton buttonWithType:UIButtonTypeCustom]; [aBtn setFrame:CGRectMake(40, 100, 60, 60)]; [aBtn setBackgroundImage:[UIImage imageNamed:@"111.png"]forState:UIControlStateNormal]; //button点击事件 [aBtn addTarget:self action:@selector(

listView长按事件内修改ListView对象内容

============问题描述============ 我在ListView的Item长按事件内打开一个弹出窗口,窗口内有一个EditText对象,在这个编辑框内输入文本点确定后,希望可以直接修改掉ListView对象内某个TextView对象的内容:现在ListView长按事件内直接修改没有问题了,只是弹出一个窗口再修改不知道该如何实现: ============解决方案1============ 引用 楼主 hackerlyf 的回复: 我在ListView的Item长按事件内打开一个弹出

iOS开发——项目总结OC篇&amp;iOS 长按事件菜单的实现（剪切版）

iOS 长按事件菜单的实现(剪切版) 一:简单实现菜单 添加长按手势 [self.label addGestureRecognizer:[[UILongPressGestureRecognizer alloc] initWithTarget:self action:@selector(labelClick)]]; 实现手势方法 1 - (void)labelClick 2 { 3 // 获得菜单 4 UIMenuController *menu = [UIMenuController share

时间日期事件处理,长按事件

OnTimeChangedListener(日期和时间的事件处理) DatePicker /*取得DatePicker对象,以init()设置初始值与OnDateChangedListener()*/ DatePicker dp= (DatePicker)findViewById(R.id.DatePicker01); dp.init (year, month, day, new OnDateChangedListener () { public void onDateChanged(DateP