移动端长按删除事件

最新推荐文章于 2023-03-25 10:46:14 发布

weixin_30737433

最新推荐文章于 2023-03-25 10:46:14 发布

阅读量345

点赞数

文章标签：数据库

原文链接：http://www.cnblogs.com/qiuchuanji/p/7864960.html

版权

需要注意两点：
　　1.长按会触发移动端的长按选中文本，这种情况下，要先去掉这个默认事件
　　2.一定要判读长按是否达到规定的时间，需要用到按下和抬起两个事件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>长按删除</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css"/>
    <script src="js/jquery-2.1.4.min.js"></script>
    <style>
        * {
            -webkit-touch-callout:none;
            -webkit-user-select:none;
            -khtml-user-select:none;
            -moz-user-select:none;
            -ms-user-select:none;
            user-select:none;
        }
        li{
            width: 100%;
            height: 100px;
            background: black;
            margin-bottom:10px;
        }
    </style>
</head>
<body>
    <div class="app">
        <ul class="list">
            <li class="list_item" data-id="0"></li>
            <li class="list_item" data-id="1"></li>
            <li class="list_item" data-id="2"></li>
        </ul>
    </div>
    <script>
        //长按删除功能
        var liList=document.getElementsByTagName('li');
        var timeout=undefined;
        for(var k=0;k<liList.length;k++){
            var a=document.getElementsByTagName('li')[k];
            a.addEventListener('touchstart',start);
            a.addEventListener('touchmove',move);
            a.addEventListener('touchend',end);
            function start(){
                console.log($(this).data('id'));
                timeout=setTimeout(function(){
                    alert('确定要删除吗？');
                },2000);

            }
            function move(){

            }
            function end(){
                clearTimeout(timeout);
            }
        }

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