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

方法一:

<div id="ttt" style="height: 100px; border: 1px solid #c0c0c0;" onmousedown="testdown();" onmouseup="testup()">test</div>
<script type="text/javascript">
    var timer;
    function testdown() {
        timer = setTimeout(function(){
            $("#ttt").html("hahahahaha");
        }, 1000);
    }
    function testup(){
        clearTimeout(timer);
    }
</script>


方法二:

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

<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>


方法三:

var timer;
//绑定单击和触摸事件
$('.userlist').on("mousedown",'.user',function(){
    console.log("点击......");
    timer = setTimeout(function(){
        alert("长按事件触发!");
        // return fun();
    }, 2000);
});
//取消timer
$('.userlist').on("mouseup",'.user',function(){
    console.log("取消......");
    clearTimeout(timer);
});

不能添加touchstart和touchend方法


修改时间 2016-09-07

真诚赞赏,手留余香
赞赏
随机推荐
CentOS 8 Apache 使用 ModSecurity 防止 DDOS
jQuery Mobile 1.4.5 select数据更新
平涂和厚涂的区别
ffmpeg基础使用
php解析模板路径
js获取url参数值的两种方式
Git忽略规则.gitignore梳理
Windows搭建基于nginx rtmp的视频点播服务器
使用FormData无刷新上传文件
express不是内部或外部命令,也不是可运行的程序或批处理文件