答案是肯定的啊,不然我写什么。
Apicloud 自身暴露出来的API
// 对swipeleft 、swipedown、swipeup、swiperight(关键词)监听,实现简单的滑动监听
api.addEventListener({
name:'swipedown'
}, function(ret, err){
alert('向下轻扫');
});
// 滚动到底部监听
api.addEventListener({
name:'scrolltobottom',
extra:{
threshold:0 //设置距离底部多少距离时触发,默认值为0,数字类型
}
}, function(ret, err){
alert('已滚动到底部');
});
以上是官方给定的Api,假如我想知道滚动的明确距离?,这样显然不满足呢。下面是非官方方法:
给div设置滚动属性
<div id="tbody" tapmode
ontouchstart="getPosition(event)" ontouchmove="getPositionEnd(event)" >
</div>
//ontouchend 必须手抬起时才能监听到
调用方法为:
<script type="text/javascript">
var positionX;
function getPosition(ev){
//获取X轴方向的起始点
positionX = ev.touches[0].pageX;
console.log(positionX);
// 也可以pageY
}
function getPositionEnd(ev){
var psx = ev.touches[0].pageX ;
console.log(psx);
// 判断两数差值 判断左滑动右滑动
console.log(positionX - psx);
}
</script>
以上呢,是手动获取加判断,那么多的H5监听呢?
给div设置监听
这个是直接调用H5本身的监听去实现功能,大致逻辑如此,可拿去参考
window.addEventListener('load', function () {
document.addEventListener('touchmove', touch, false);
document.addEventListener('touchend', touch, false);
function touch(event) {
var event = event || window.event;
switch (event.type) {
case "touchmove":
//执行方法
changeCss();
break;
case "touchend":
//执行方法
changeCss();
break;
}
}
}, false);
window.onscroll = function (ev) {
//执行方法
changeCss()
}
window.scrollY ; //即为Y轴移动的距离
对于监听还需要注意一下:
Mozilla中:
addEventListener的使用方式
target.addEventListener(type,listener,useCapture);
target: 文档节点、document、window 或 XMLHttpRequest。
type: 字符串,事件名称,不含“on”,比如“click”、“mouseover”、“keydown”等。
listener :实现了 EventListener 接口或者是 JavaScript 中的函数。
useCapture :是否使用捕捉,一般用 false 。例如:document.getElementById(“testText”).addEventListener(“keydown”, function (event) { alert(event.keyCode); }, false);
IE中:
target.attachEvent(type, listener);
target: 文档节点、document、window 或 XMLHttpRequest。
type: 字符串,事件名称,含“on”,比如“onclick”、“onmouseover”、“onkeydown”等。
listener :实现了 EventListener 接口或者是 JavaScript 中的函数。 例如:document.getElementById(“txt”).attachEvent(“onclick”,function(event){alert(event.keyCode);});
W3C 及 IE 同时支持移除指定的事件, 用途是移除设定的事件, 格式分别如下:
removeEventListener(event,function,capture/bubble);
Windows IE的格式如下:
detachEvent(event,function);
DOM2 的进化:
DOM 0 Event | DOM 2 Event |
---|---|
onblur() | blur |
onfocus() | focus |
onchange() | change |
onmouseover() | mouseover |
onmouseout() | mouseout |
onmousedown() | mousedown |
onmouseup() | mouseup |
onmouseup() | mouseup |
onclick() | click |
ondblclick() | dblclick |
onkeydown() | keydown |
onkeyup() | keyup |
onkeypress() | keypress |
onsubmit() | submit |
onload() | load |
onunload() | unload |
关于二者监听的不同,大家可以参考:https://www.cnblogs.com/ConfidentLiu/p/7815624.html