鼠标的长按与点击事件

js实现鼠标的长按与点击分别实现不同的事件。

设置延时函数setTimeout()区分点击操作或者长按操作
长按时鼠标的按下与抬起分别实现长按事件的开始与结束
比如录音操作的开始录音与结束录音。

代码

去博客设置页面，选择一款你喜欢的代码片高亮样式，下面展示同样高亮的 代码片.

// 鼠标点击事件
var timeOutEvent=0;
$(document).ready(function(){
    $("#touchArea").on({
        mousedown: function(e){
            timeOutEvent = setTimeout("longPress()",500);
            e.preventDefault();
            console.log("mousedown:");
        },
        //mousemove部分可视情况选择要或者不要
        // mousemove: function(){
        //     clearTimeout(timeOutEvent);
        //     console.log("mousemove:");
        //     timeOutEvent = 0;
        // },
        mouseup: function(){
            console.log("mouseup:");
            if(timeOutEvent==0){
                alert("长按事件结束")
            }
            else{
                clearTimeout(timeOutEvent);
                alert("点击事件")
            }
            return false;
        }
  })
});

function longPress(){
    timeOutEvent = 0;
    alert("长按事件开始");
}