touch事件（按下显示，松开消失）

最新推荐文章于 2021-11-06 11:40:00 发布

Vivianluolita

最新推荐文章于 2021-11-06 11:40:00 发布

阅读量3k

点赞数

分类专栏： HTML5+CSS3

HTML5+CSS3 专栏收录该内容

45 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
</head>
<body>

<div style="width:100%;">
    <div id="touchArea" style="width:90%; height:200px; background-color:#CCC;font-size:100px">
        长按我</div>
    <div class="showArea" style="width:90%; height:100px; background-color:red;font-size:100px;display: none"></div>
</div>
<script>
    var timeOutEvent=0;

    $(function(){
        $(document).click(function(){
            $(".showArea").css("display","none");
        })

        $("#touchArea").on({
            touchstart: function(e){
                timeOutEvent = setTimeout("longPress()",500);
                e.preventDefault();
                return false;
            },
            touchmove: function(){
                clearTimeout(timeOutEvent);
                timeOutEvent = 0;
            },
            touchend: function(e){
                clearTimeout(timeOutEvent);
                timeOutEvent = ShortLeave();
                e.preventDefault();
                return false;

            }
        })
    });


    function longPress(){
        timeOutEvent = 0;
        $(".showArea").css("display","block");
    }
    function ShortLeave(){
        timeOutEvent = 0;
        $(".showArea").css("display","none");

    }

</script>
</body>
</html>

touch 和 click事件的相关冲突

点击打开链接

问题：有touch 就没有了 click功能，解决方法：去掉e.preventDefault();
                return false;

Vivianluolita

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
touch事件（按下显示，松开消失）

长按我 var timeOutEvent=0; $(function(){ $(document).click(function(){ $(".showArea").css("display","none"); }) $("#touchArea").on({ touch
复制链接

扫一扫

专栏目录