1. 程式人生 > >JQuery 獲取touchstart,touchmove,touchend 座標

JQuery 獲取touchstart,touchmove,touchend 座標

JQuery寫法:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 $('#id').on('touchstart',function(e) { var _touch = e.originalEvent.targetTouches[0]; var _x= _touch.pageX; }); $('#id').on('touchmove',function(e) { var _touch = e.originalEvent.targetTouches[0]; var _x= _touch.pageX; });
$('#id').on('touchend',function(e) { var _touch = e.originalEvent.changedTouches[0]; var _x= _touch.pageX; }

原生寫法:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 document.getElementById("id").addEventListener("touchstart",function(e) { var _x=e.touches[0].pageX;
var _y=e.touches[0].pageY; console.log("start",_x) }) document.getElementById("id").addEventListener("touchmove",function(e) { var _x=e.touches[0].pageX; var _y=e.touches[0].pageY; console.log("move",_x) }) document.getElementById("id").addEventListener("touchend",function(e) { var _x=e.changedTouches[0].pageX;
var _y=e.changedTouches[0].pageY; console.log("end",_x) })

 以上兩種辦法中 touchend 需要使用changedTouches[0]

一般我們取第一個手指的座標,如果有其他要求可能 需要判斷手指數量

1 2 3 4 if (e.targetTouches.length == 1) { //... }

順帶貼出常用的一句

1

相關推薦

JQuery 獲取touchstart,touchmove,touchend 座標

JQuery寫法: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 $('#id').on('touchstart',function(e) { var _touch = e.originalEvent

jQuerytouchstart,touchmove,touchend獲取位置

     $('#webchat_scroller').on('touchstart',function(e) {       var touch = e.originalEvent.targetTouches[0];       var y = touch.pageY;       });

獲取touchstart,touchmove,touchend 坐標

doc chm jquer gin cti pagex touch 需要 func 簡單說下如何用jQuery 和 js原生代碼獲取touchstart,touchmove,touchend 坐標值: jQuery 代碼: $(‘#id‘).on(‘touchstart‘

jQuery touchstart,touchmove,touchend 獲取位置

     $('#webchat_scroller').on('touchstart',function(e) {       var touch = e.originalEvent.targetTouches[0];       var y = touch.pageY;       });

touchstart, touchmove, touchend, mousedown, mousemove, mouseup, 手機端和pc端點選及觸控事件

touchstart事件:當手指觸控式螢幕幕時候觸發,即使已經有一個手指放在螢幕上也會觸發。 touchmove事件:當手指在螢幕上滑動的時候連續地觸發。在這個事件發生期間,呼叫preventDefault()事件可以阻止滾動。 touchend事件:當手指從螢幕上離開的時候觸發。 to

touchstart,touchmove,touchend觸控事件的小小實踐心得

近段時間使用html5開發一個公司內部應用,而觸控事件必然是移動應用中所必須的,剛開始以為移動裝置上或許也會支援滑鼠事件,原來是不支援的,好在webkit核心的移動瀏覽器支援touch事件,並且打包成app也毫無壓力。原本以為touch事件應該跟滑鼠事件是一樣的道理,實踐過程中雖然不難,但還是碰到了

jquery獲取元素座標獲取滑鼠座標

獲取頁面某一元素的絕對X,Y座標,可以用offset()方法: var X = $('#DivID').offset().top; var Y = $('#DivID').offset().left; 獲取相對(父元素)位置: var X = $('#Div

jquery 獲取 outerHtml

原生 獲取 內置 方法 屬性 pos jquery att ont 在開發過程中,jQuery.html() 是獲取當前節點下的html代碼,並不包括當前節點本身的代碼,然後我們有時候確須要。找遍jQuery api文檔也沒有不論什麽方法能夠拿到。 看到有的人通過pa

JqueryjQuery獲取URL參數的兩種方法

ont ras mil scrip line 兩種方法 lower quest request jQuery獲取URL參數的關鍵是獲取到URL,然後對URL進行過濾處理,取出參數。 location.href是取得URL。location.search是取得URL“?

jquery 獲取驗證碼倒計時

disabled rim clear self cti jquery app text function <button type="button" class="mui-btn mui-btn-primary mui-btn-outlined mui-pull-r

jQuery獲取(URL)地址欄參數

location clas -1 cat 地址 func 地址欄 oca url地址 //獲取地址欄參數 //url為空時為調用當前url地址 //調用方法為 var params = getPatams(); function getPa

jquery獲取一組相同標簽內沒有class的標簽

spa 沒有 func 標簽 his class log cnblogs style $("ul>li[class!=‘pre‘][class!=‘nex‘]").each(function(i){   $(this).html(i); }); jquery獲取

jquery 獲取及操作元素 (常用)

.com pre img htm color hello fun 文檔 wid jquery 獲取元素 參考:http://www.w3school.com.cn/jquery/jquery_selectors.asp 1.(1)$(document).ready()

JavaScript or jQuery 獲取option value值 以及文本內容的方法

ole scala ini ges src 中一 code inner () 1.html     <div class="form-group"> <label>保險公司</label>

JQuery獲取屬性值

zhang 文本 引號 rop 屬性 false vid 標簽 als $("#divid").text(); //獲取id為divid下的文本內容 $("#divid").attr("name"); //獲取id為divid標簽的name的值 $("#divid").

JQuery獲取input type="text"中的值的各種方式

title xhtml w3c xmlns src cnblogs 文本框 ext1 text1 JQuery獲取input type="text"中的值的各種方式 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tr

jquery獲取復選框的值

js checkbox <mce:script src="jquery.js" mce_src="jquery.js"></mce:script><!--這是載入jquery.js文件,如果不使用jquery可以去掉--> <mce:script

Jquery獲取元素方法

strong 大小寫 element tex 一個 類選擇器 ast id選擇器 選擇 Jquery 獲取元素的方法分為兩種:jQuery選擇器、jQuery遍歷函數。 1、獲取本身:  a.只需要一種jQuery選擇器 選擇器 實例 說明 #Id $(‘#

jQuery獲取屬性

html prop pre class 對象 jquer light 常用 jquery對象 jQuery在獲取jQuery對象的屬性時,出現attr()獲取不到的情況,此時,請使用prop()獲取 如下為經常用到的: var oHtml=$(this).pr

jquery——獲取dom元素身上的綁定事件的問題

blog 問題 例如 tor 函數功能 strong .get 也有 cnblogs 在jQuery1.8.0版本之前,我們要想獲取某個DOM綁定的事件處理程序可以這樣: $.data(domObj,‘events‘);//或者$(‘selector‘).da