jQuery實現長按按鈕觸發事件的方法

2019-11-20 13:15:01

字體：大中小

來源：轉載

供稿：網友

本文實例講述了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" style="width:100px; height:100px; background:#ddd;">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>