虽然jquery mobile有很多事件支持,比如swipe,
但是要给一个小按钮加上swipe的话几乎就没法好好触发事件。
比如吸住底部的工具条,滑动它然后拉出更多内容,就可以采用比较滑动起始点与结束点的大小来判断方向以及方位。
对于手机屏幕,事件还是加在window上最为灵敏,或者也有加在body上的。
window.addEventListener('touchstart', function (e) { nStartY = e.targetTouches[0].screenY; nStartX = e.targetTouches[0].screenX; }); window.addEventListener('touchend', function (e) { nChangY = e.changedTouches[0].screenY; nChangX = e.changedTouches[0].screenX; });
这里的e.targetTouches和e.changedTouches都是JS原生的对象。
打印它们会显示是object list
所以取它们的第一个元素,该元素有几个属性:
client / clientY:// 触摸点相对于浏览器窗口viewport的位置 pageX / pageY:// 触摸点相对于页面的位置 screenX /screenY:// 触摸点相对于屏幕的位置 identifier: // touch对象的unique ID
pageX和pageY会不断增加
screenX和screenY永远相对与屏幕尺寸不变。
可以适当加上
event.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等
如果要用jquery 的bind 来监听事件,写法会略有不同,e会被转化成this,具体写法还待有空倒腾一下。
Apple有对这些事件进行说明:
https://developer.apple.com/library/safari/documentation/appleapplications/reference/safariwebcontent/handlingevents/handlingevents.html
用屏幕的触点可以自己模拟swipe事件,在没有这种事件的时候,判断滑动方向:
var start; $('.slidePics').on("touchstart",getStart, this); $('.slidePics').on("touchmove",getDirection, this); function getStart(e){ start = parseInt(e.targetTouches[0].pageX); } function getDirection(e){ var move = parseInt(e.targetTouches[0].pageX); //console.log(start, move) if (start < move){ alert("right") } else if(start > move){ alert("left") } }
这里要注意,touchmove的坐标值不停在变化,所以如果用全局变量去保存赋值,是保存不了的。
只有即时拿去与start的坐标进行比较。