jQuery实现长按按钮触发事件的方法

本文实例讲述了jQuery实现长按按钮触发事件的方法。分享给大家供大家参考。具体分析如下:

现在手机端的快速发展,使许多手机手势需要制作到手机版的网页过程中

网上有许多长按按钮的插件,甚至仅仅是jQuery Mobile都有长按事件

但是基于种种的兼容性问题,

只使用jquery去实现长按动作,可以在手机端与电脑端保持极强的兼容性

一、基本目标

制作一个按钮,实质上一个100x100px的灰色背景的图层,长按达2s则图层里的文字从in变成out。如下图所示:

二、制作过程

代码如下:

复制代码 代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>无标题文档</title> 
<script type="text/javascript" src="js/jquery-1.11.1.js"></script> 
 
</head> 
 
<body> 
<div id="mydiv">out</div> 
</body> 
</html> 
 
<script> 
/*设置一个长按的计时器,如果点击这个图层超过2秒则触发,mydiv里面的文字从out变in的动作*/ 
var timeout ; 
  
$("#mydiv").mousedown(function() { 
    timeout = setTimeout(function() { 
        $("#mydiv").text("in"); 
    }, 2000); 
}); 
  
$("#mydiv").mouseup(function() { 
    clearTimeout(timeout); 
    $("#mydiv").text("out"); 
}); 
 
$("#mydiv").mouseout(function() { 
    clearTimeout(timeout); 
    $("#mydiv").text("out"); 
}); 
 
</script>

实质上,长按的时间不应该过长,因为这有可能与手机系统的部分长按手势产生冲突,但也不宜过短,因为长按时间过短与点击没有任何区别,

理论上,判断长按结束,在手机端上仅设置mouseup动作就可以,

但是,在PC上仅设置mouseup会有如下的bug:

在长按的时候同时涂黑图层上面的文字,再把鼠标拖出图层,则可以躲过系统mouseup的判定,当然,在手机上无法实现这一个动作,如果完全是写给手机的网页,完全可以不管这步,不过为了更好的兼容性,还是加上mouseout动作修正这个bug。

希望本文所述对大家的jQuery程序设计有所帮助。

本页内容版权归属为原作者,如有侵犯您的权益,请通知我们删除。
事情: 从java后台返回ListString类型数据,用于界面显示。但js中想获取它并操作它。直接使用EL表达式,js把它识别成字符串了。不是我想要的啊。。网上搜了搜大家的解决方案...最好的当然是把List集合转成json格式传到界面上。这样js里面操作也简单,页面也没有影响。 解决: 将ListString 转成json,传到界面。js中使用var arr = eval(‘${list}');将list转成js数组。 我的代码: 复制代码 代码如下: var keyList = eval('${key
复制代码 代码如下: function tofocus(itemname) //按回车置下一个位置 { var a a=eval("document.vouch."+itemname) a.focus() } 在控件中使用onkeypress="javascrip:if(window.event.keyCode==13){tofocus('nextformname')}提取下一个控件名
jquery自动填充勾选框,即把勾选框打上(true),然后通过ajax方式获得勾选项列表,再把列表内的选项打上。 复制代码 代码如下: 下拉框select name="makemodule" id="makemodule" style='width:130px' onchange='makemoduleSelected()' option value='1'1/option /select select改变,触发函数makemoduleSelected(),该函数如下: 复制代码 代码如下: //模板下拉

Javascript事件实例详解 - 2015-03-27 11:03:03

document是位于html标签之上的,可以说是权力最大的。下面的实例当你单击页面上的任何位置都会弹出“a”,正是运用了document的特性。 复制代码 代码如下: script document.onclick=function(){ alert('a'); }; /script 获取鼠标位置clientX,clientY---注意这里仅仅只是可视区的鼠标位置 复制代码 代码如下: script document.onclick=function(ev){ if(ev) { alert(ev.clie

可恶的ie8提示缺少id未定义 - 2015-03-27 11:03:03

最近一直用javascript编程,用到了json,写了个数组[{'id':'key_01','name':'高校'},{'id':'key_02','name':'直送卡'},{'id':'key_03','name':'新生'},{'id':'key_04','name':'换机'},{'id':'key_05','name':'动感地带套卡'},{'id':'key_06','name':'库存'},{'id':'key_07','name':'飞信'},{'id':'key_08','name':'
但唯一遗憾的是,在对中文输入法打开时,firefox3.0中是对中文拼音的自动匹配,而对输入后的中文无法及时触发匹配;而在我的IE6.0下,则无此问题。 原因分析: Autocomplete插件对用户输入字符的触发自动匹配是通过”keydown”事件进行的(可分析jquery.autocomplete.js第 92行),在IE6中,当输入法打开时,输入的字符是不会触发”keydown”的,只有中文输入完毕才触发之,所以中文输入和latin文没有区别的;但在firefox3.0下,无论输入法打开否,按键都会触
复制代码 代码如下: !doctype html html lang="en" head meta charset="UTF-8" meta name="Generator" content="EditPlus" meta name="Author" content="" meta name="Keywords" content="" meta name="Description" content="" title节日倒计时/title /head body script type="text/javas

jQuery实现数字加减效果汇总 - 2015-03-27 11:03:03

我们在网上购物提交订单时,在网页上一般会有一个选择数量的控件,要求买家选择购买商品的件数,开发者会把该控件做成可以通过点击实现加减等微调操作,当然也可以直接输入数字件数。 左右加减数字 像京东提交订单时目前使用的是左右加减数字的效果,这个效果直接明了,操作简单。我们使用jquery.spinner.js插件实现左右加减数字,调用方法非常简单。 复制代码 代码如下: input type="text" class="spinner"/ 调用也非常简单,先载入jquery库文件和jquery.spinner.

jquery isType() 类型判断代码 - 2015-03-27 11:03:03

复制代码 代码如下: class2type = {}; toString = Object.prototype.toString; type: function( obj ) { return obj == null ? String( obj ) : class2type[ toString.call(obj) ] || "object"; }, isFunction: function( obj ) { return jQuery.type(obj) === "function"; }, isArra
本文是从 5 Reasons Your Javascript Stinks 这篇文章翻译而来。 Javascript在互联网上名声很臭,但你又很难再找到一个像它这样如此动态、如此被广泛使用、如此根植于我们的生活中的另外一种语言。它的低学习门槛让很多人都称它为学前脚本语言,它另外一个让人嘲笑的东西是动态语言的概念是偏偏使用了高标准的静态数据类型。其实,你和Javascript都站错了立场,而现在,你让Javascript很生气。这里有五个原因能说明你的Javascript技术很烂。 1. 你没有使用命名空间。