jQuery實(shí)現(xiàn)長(zhǎng)按按鈕觸發(fā)事件的方法

更新時(shí)間：2015年02月02日 15:23:59 作者：yongh701

這篇文章主要介紹了jQuery實(shí)現(xiàn)長(zhǎng)按按鈕觸發(fā)事件的方法,可應(yīng)用于手機(jī)端應(yīng)用程序的開發(fā)中,非常具有實(shí)用價(jià)值,需要的朋友可以參考下

本文實(shí)例講述了jQuery實(shí)現(xiàn)長(zhǎng)按按鈕觸發(fā)事件的方法。分享給大家供大家參考。具體分析如下：

現(xiàn)在手機(jī)端的快速發(fā)展，使許多手機(jī)手勢(shì)需要制作到手機(jī)版的網(wǎng)頁(yè)過(guò)程中

網(wǎng)上有許多長(zhǎng)按按鈕的插件，甚至僅僅是jQuery Mobile都有長(zhǎng)按事件

但是基于種種的兼容性問(wèn)題，

只使用jquery去實(shí)現(xiàn)長(zhǎng)按動(dòng)作，可以在手機(jī)端與電腦端保持極強(qiáng)的兼容性

一、基本目標(biāo)

制作一個(gè)按鈕，實(shí)質(zhì)上一個(gè)100x100px的灰色背景的圖層，長(zhǎng)按達(dá)2s則圖層里的文字從in變成out。如下圖所示：

二、制作過(guò)程

代碼如下：

復(fù)制代碼代碼如下:

<!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>無(wú)標(biāo)題文檔</title>  

<script type="text/javascript" src="js/jquery-1.11.1.js"></script>  

</head>  

<body>  

<div id="mydiv" style="width:100px; height:100px; background:#ddd;">out</div>  

</body>  

</html>  

<script>  

/*設(shè)置一個(gè)長(zhǎng)按的計(jì)時(shí)器，如果點(diǎn)擊這個(gè)圖層超過(guò)2秒則觸發(fā)，mydiv里面的文字從out變in的動(dòng)作*/  

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>

實(shí)質(zhì)上，長(zhǎng)按的時(shí)間不應(yīng)該過(guò)長(zhǎng)，因?yàn)檫@有可能與手機(jī)系統(tǒng)的部分長(zhǎng)按手勢(shì)產(chǎn)生沖突，但也不宜過(guò)短，因?yàn)殚L(zhǎng)按時(shí)間過(guò)短與點(diǎn)擊沒(méi)有任何區(qū)別，

理論上，判斷長(zhǎng)按結(jié)束，在手機(jī)端上僅設(shè)置mouseup動(dòng)作就可以，

但是，在PC上僅設(shè)置mouseup會(huì)有如下的bug：

在長(zhǎng)按的時(shí)候同時(shí)涂黑圖層上面的文字，再把鼠標(biāo)拖出圖層，則可以躲過(guò)系統(tǒng)mouseup的判定，當(dāng)然，在手機(jī)上無(wú)法實(shí)現(xiàn)這一個(gè)動(dòng)作，如果完全是寫給手機(jī)的網(wǎng)頁(yè)，完全可以不管這步，不過(guò)為了更好的兼容性，還是加上mouseout動(dòng)作修正這個(gè)bug。

希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: