移動端筆記——jQuery touch事件
阿新 • • 發佈:2017-07-24
star sed 支持 event eve spc 觀察 log 普通
若在pc上,則使用鼠標事件,在移動設備中,就使用觸摸事件,就這麽簡單。 出處:http://blog.csdn.net/jiangcs520/article/details/17564065
判斷移動端還是pc端function
IsPC()
{
var
userAgentInfo = navigator.userAgent;
var
Agents =
new
Array(
"Android"
,
"iPhone"
,
"SymbianOS"
,
"Windows Phone"
,
"iPad"
,
"iPod"
);
var
flag =
true
;
for
(
var
v = 0; v < Agents.length; v++) {
if
(userAgentInfo.indexOf(Agents[v]) > 0) { flag =
false
;
break
; }
}
return
flag;
}
$(document).bind(touchEvents.touchstart,
function
(event) {
event.preventDefault();
});<br>
$(document).bind(touchEvents.touchmove,
function
(event) {
event.preventDefault();
});
$(document).bind(touchEvents.touchend,
function
(event) {
event.preventDefault();
});
很多博文中稱touch的三個事件都有targetTouches,touches以及changedTouches對象列表,其實不然,touchend事件中應該是只有個changedTouches觸摸實例列表的,而且這裏說明一下,回調函數的event只是一個普通的object對象,實際上event中有一個originalEvent屬性,這才是真正的touch事件,這個事件中才存在著上訴三個觸摸實例列表,這三個實例存儲了觸摸事件的位置等等屬性,類似於鼠標事件。其他地方基本與鼠標事件是一致的。簡單介紹一下這三個觸摸列表,touches是在屏幕上的所有手指列表,targetTouches是當前DOM上的手指列表,所以當手指移開觸發touchend事件時,event.originalEvent是沒有這個targetTouches列表的,而changedTouches列表是涉及當前事件的列表,例如touchend事件中,手指移開。接下來談談pc與移動端的適配問題,既然使用html5,當然是看中他的跨平臺特性了,不僅僅要ios和android適配,pc上直接打開網頁最好也是可以的,但是pc上只支持鼠標事件怎麽辦。好辦,仔細觀察上面代碼的觸摸事件,touchEvents.touchXXX,看如下代碼:
var touchEvents = { touchstart: "touchstart", touchmove: "touchmove", touchend: "touchend", /** * @desc:判斷是否pc設備,若是pc,需要更改touch事件為鼠標事件,否則默認觸摸事件 */ initTouchEvents: function () { if (isPC()) { this.touchstart = "mousedown"; this.touchmove = "mousemove"; this.touchend = "mouseup"; } } };
若在pc上,則使用鼠標事件,在移動設備中,就使用觸摸事件,就這麽簡單。 出處:http://blog.csdn.net/jiangcs520/article/details/17564065
移動端筆記——jQuery touch事件