js中的touch事件及gesture 手勢事件

一：touch事件分類？

1. touchstart：當手指觸控螢幕時觸發。不管有多少個手指放在了螢幕上，只要再觸控一下螢幕就會觸發。在此，我用小公尺的google瀏覽器做了乙個實驗，新增乙個計數器，用來檢視螢幕上手指觸控的次數，**如下：

window.onload = function
(),false)
}

2.touchmove：當手指在螢幕上滑動的時候觸發該是事件，在這期間可以通過event.preventdefault()來阻止滾動；

3.touchend：手指從螢幕中移開的時候觸發；

4.touchcancel：當系統停止跟蹤觸控時觸發。（不做說明）

例如我們在手機螢幕上利用前面三個事件來獲取手指的位置，壓力，接觸面的值：效果如下：

html和css**：

lang="en">
charset="utf-8">
name="viewport"
content="width=device-width,height=device-height, user-scalable=no,initial-scale=1, minimum-scale=1, maximum-scale=1 ">
documenttitle>
#mydiv
#mydiv2
style>
head>
id="mydivstart">touch start(0, 0)div>
id="mydivmove">touch move(0, 0)div>
id="mydivend">touch end(0, 0)div>
id="myradius">touch radius(0, 0)div>
id="force">touch force：div>
id="rotateangle">touch rotationangle：div>
id="mydiv2">
div>
body>
html>js**：
function touchevent(event)
}document.addeventlistener("touchstart",touchevent,false);
document.addeventlistener("touchmove",touchevent,false);
document.addeventlistener("touchend",touchevent,false);

二：touch事件對應的event物件有哪些？

根據上面的**，可以得到，當觸發touch事件的時候，會生成乙個touchevent物件，如下圖：

常見的有上面劃線三種屬性，在做一些效果的時候，也是用以下的三個屬性中的touchlist物件來確定元素的所有資訊。

1.touches：表示當前跟蹤的觸控操作的touch物件的屬性；

2.targettouches：表示特定事件目標的touch物件的陣列。

3.changetouches：表示從上一次觸控以來，發生了改變的touch物件的陣列。

以上這些屬性都是乙個包含名為touchlist的物件，當觸發點為1(即：event.touches.length ===event.targettouches.lengh ===event.changetouches.length)的時候，它們包含觸控點的所有資訊,但是這時候雖然包含資訊一樣，但是執行(event.targettouches == event.touches)返回值為false，那就是說，裡面肯定有一些地方不相同，暫時還沒有找到，如下圖所示：

下面是一些被觸控位置的一些重要屬性：

var mydiv = document.getelementbyid('mydiv');
function gesture(event)
}document.addeventlistener('gesturestart',gesture,false);
document.addeventlistener('gesturechange',gesture,false);
document.addeventlistener('gestureend',gesture,false);

js中的touch事件及gesture 手勢事件

JS的Touch事件們,觸屏時的js事件

js中的事件機制及事件

iPhone開發中touch的事件

js中的touch事件及gesture 手勢 事件

JS的Touch事件們,觸屏時的js事件

js中的事件機制及事件

iPhone開發中touch的事件

相關推薦

js中的touch事件及gesture 手勢事件