JQ长按响应事件

11 篇文章 0 订阅

例子

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>JQ长按响应事件</title>
    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
    <script type="text/javascript" src="JQhuadong/js/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
    <script type="text/javascript" src="js/layer/layer-min.js"></script>

    <style type="text/css">
        .div-none{display: none;}
        .div-show{display: block;}
    </style>
</head>
<body>

<div class="container">

<!--    长按响应-->
    <?php for ($i=0;$i<10;$i++){?>
    <div id="mydiv" class="divs" style="width:100%; height:50px; background:#ddd;margin-top: 20px;" data-id="<?php echo $i?>">
        长按<?php echo $i?>
        <div class="div-none" id="show<?php echo $i?>">显示内容<?php echo $i?></div>
    </div>
    <?php }?>
</body>
</html>

<script>
    /*设置一个长按的计时器,如果点击这个图层超过2秒则触发,mydiv里面的文字从out变in的动作*/

    var self = this;
    var longClick =0;
    $(".divs").on({
        touchstart: function(e){
            var id= $(this).data("id");
            longClick=0;//设置初始为0
            timeOutEvent = setTimeout(function(){
                //此处为长按事件-----在此显示遮罩层及删除按钮
                longClick=1;//假如长按,则设置为1
                var msg = "您确定要这么做吗?显示内容"+id;
                //询问框
                layer.confirm(msg, {
                    btn: ['确定', '取消'] //按钮
                }, function () {
                    location.href = "xx/xx/x/"+id;
                }, function () {
                    layer.closeAll();//取消按钮
                });
            },500);
        },
        touchmove: function(){
            clearTimeout(timeOutEvent);
            timeOutEvent = 0;
            e.preventDefault();
        },
        touchend: function(e){
            clearTimeout(timeOutEvent);
            if(timeOutEvent!=0 && longClick==0){//点击
                //此处为点击事件----在此处添加跳转详情页
            }
            return false;
        }
    });




</script>
</body>

</html>
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值