js模擬長按事件的實現方式

之前本身沒事開發了一個android webapp，其中有長按LI列表彈出菜單，有童鞋問怎麼實現的，特此分享一下。 其實也很簡單，只要清楚五個方法就行：ontouchstart、ontouchmove、ontouchend、setTimeout、clearTimeout 一、首先在咱們按下手指時觸發：ontouchstart 二、當咱們釋放手指時觸發：ontouchend 三、若是在按與放之間你沒有爲其定義事件，那麼系統自動認爲是onclick事件 四、因此咱們要在按與放之間定義一個事件longPress，這裏就要用定時器setTimeout。 五、但若是在按與放之間有手指有移動，你不能認爲它是長按，這應該是用戶想滑動，因此ontouchmove時要取消定義的那個長按事件，這時就要取消定時器clearTimeout。 實例以下：

<div>長按我</div>  


var timeOutEvent=0;//定時器  
//開始按  
function gtouchstart(){  
    timeOutEvent = setTimeout("longPress()",500);//這裏設置定時器，定義長按500毫秒觸發長按事件，時間能夠本身改，我的感受500毫秒很是合適  
    return false;  
};  
//手釋放，若是在500毫秒內就釋放，則取消長按事件，此時能夠執行onclick應該執行的事件  
function gtouchend(){  
    clearTimeout(timeOutEvent);//清除定時器  
    if(timeOutEvent!=0){  
        //這裏寫要執行的內容（尤如onclick事件）  
        alert("你這是點擊，不是長按");  
    }  
    return false;  
};  
//若是手指有移動，則取消全部事件，此時說明用戶只是要移動而不是長按  
function gtouchmove(){  
    clearTimeout(timeOutEvent);//清除定時器  
    timeOutEvent = 0;  
};  
  
//真正長按後應該執行的內容  
function longPress(){  
    timeOutEvent = 0;  
    //執行長按要執行的內容，如彈出菜單  
    alert("長按事件觸發發");  
}

以上內容是：若是用戶在500毫秒內沒有放開手指，也沒有移動手指，則觸發長按事件