zoukankan      html  css  js  c++  java
  • 移动端长按删除事件

    需要注意两点:
      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{
    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>
  • 相关阅读:
    最小生成树
    线段树
    编程快捷键
    线段树的动态开点
    常用库
    线性求逆元
    文件读入
    树上倍增(LCA)
    set容器
    快读与快写
  • 原文地址:https://www.cnblogs.com/qiuchuanji/p/7864960.html
Copyright © 2011-2022 走看看