apicloud长按事件
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>
复制代码
上一篇: 小程序开发用什么编程语言
下一篇: 分享微信小程序签到考勤后端代码