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


声明:本站所有文章和图片,如无特殊说明,均为原创发布。商业转载请联系作者获得授权,非商业转载请注明出处。
随机推荐
Nginx 通过日志统计访问数据
JavaScript 引用类型
JavaScript 数组
如何调整 iconfont 图标的位置和基线
WordPress 插件开发
JavaScript 类操作 classList
Node.js readline 模块
CSS 滚动条样式修改