欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

apicloud长按事件

程序员文章站 2022-03-06 12:31:15
...

APICloud官方在1.1.60版本中添加了长按监听方法,但是真的仅仅是监听到了长按的操作,不能实时获取到长按的位置,长按的元素,所以用了之前找到的一个方法,使用JS代码获取值,使用longpress监听方法调用JS函数,代码贴下

首先要在页面加载时初始化监听和声明一个要用到的全局变量:

var Htmls  = "";

apiready = function() {

        api.addEventListener({

            name:'longpress'

        },function(ret,err){

            if(Htmls != "")

            {

                alert(Htmls);

                Htmls = "";

            }

        });

}


复制代码

接下来是获取值的代码(这里用HTML代码做示例):

var timeOutEvent = 0;

       //定时器

       //开始按

       function gtouchstart(obj) {

              Htmls = $(obj).html();

              timeOutEvent = setTimeout(function(){

                      alert("清除了");//因为页面弹动会导致元素一直处于按住的状态,所以超过700毫秒自动清空变量,避免点击其他元素触发事件

                      Htmls = "";

           }, 700);

           return false;

    };


    //手释放,取消长按事件

    function gtouchend() {

           clearTimeout(timeOutEvent);

           Htmls = "";

    };

    //如果手指有移动,则取消所有事件,此时说明用户只是要移动而不是长按

    function gtouchmove() {

               clearTimeout(timeOutEvent);

               Htmls = "";

    };

复制代码

最后的元素事件代码:

ontouchstart="gtouchstart(this)" 

ontouchmove="gtouchmove()" 

ontouchend="gtouchend()"

复制代码


整体的源代码在这:

<!DOCTYPE html>

<html>

<head>

        <meta charset="utf-8">

    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>

    <title>title</title>

    <link rel="stylesheet" type="text/css" href="../css/api.css"/>

    <style>

            body{

                    

            }

    </style>

</head>

<body>

        <a ontouchstart="gtouchstart(this)" ontouchmove="gtouchmove()" ontouchend="gtouchend()">长按我(1)</a></br>

        <a ontouchstart="gtouchstart(this)" ontouchmove="gtouchmove()" ontouchend="gtouchend()">长按我(2)</a></br>

        <a ontouchstart="gtouchstart(this)" ontouchmove="gtouchmove()" ontouchend="gtouchend()">长按我(3)</a></br>

        <a ontouchstart="gtouchstart(this)" ontouchmove="gtouchmove()" ontouchend="gtouchend()">长按我(4)</a>

</body>

<script type="text/javascript" src="../script/api.js"></script>

<script type="text/javascript" src="../script/jquery-1.10.2.js"></script>

<script type="text/javascript">

        var Htmls  = "";

        apiready = function() {

        api.addEventListener({

            name:'longpress'

        },function(ret,err){

            if(Htmls != "")

            {

                alert(Htmls);

                Htmls = "";

            }

        });

        }

        

    var timeOutEvent = 0;

    //开始按

           function gtouchstart(obj) {

              Htmls = $(obj).html();

              timeOutEvent = setTimeout(function(){

                alert("清除了");//因为页面弹动会导致元素一直处于按住的状态,所以超过700毫秒自动清空变量,避免点击其他元素触发事件

            Htmls = "";

                   }, 700);

               return false;

    };


    //手释放,取消长按事件

    function gtouchend() {

               clearTimeout(timeOutEvent);

               Htmls = "";

    };

    //如果手指有移动,则取消所有事件,此时说明用户只是要移动而不是长按

    function gtouchmove() {

               clearTimeout(timeOutEvent);

               Htmls = "";

    };

</script>

</html>

复制代码