亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

jQuery移動頁面開發(fā)中的觸摸事件與虛擬鼠標(biāo)事件簡介

 更新時間：2015年12月03日 15:33:15   投稿：goldensun  
這篇文章主要介紹了jQuery移動頁面開發(fā)中的觸摸事件與虛擬鼠標(biāo)事件的簡單編寫方法,jQuery是當(dāng)今人氣最高的Javascript庫并被廣泛應(yīng)用于移動web的開發(fā),需要的朋友可以參考下

觸摸事件(touch)
在 jQuery Mobile 中有一些觸摸事件是可定制的。然而，這些事件僅當(dāng)與支持觸摸功能的設(shè)備進(jìn)行交互的用戶訪問您的 jQuery Mobile 網(wǎng)站時才可用。當(dāng)這些事件可用時，您可以觸發(fā)任何自定義java script 作為對五種不同的事件的響應(yīng)tap、taphold、swipe、swipeleft 和 swiperight。

tap(輕擊)：一次快速完整的輕擊后觸發(fā)

taphold（輕擊不放）：輕擊并不放（大約一秒）后觸發(fā)

swipe(滑動)：一秒內(nèi)水平拖拽大于30PX，或者縱向拖曳小于20px的事件發(fā)生時觸發(fā)的事件。多長時間拖拽多少px可以設(shè)置的。這個事件有其相關(guān)聯(lián)的屬性，分別為

scrollSupressionThreshold (默認(rèn): 10px) – 水平方向拖拽大于這個值，將不觸發(fā)。
durationThreshold (默認(rèn): 1000ms) – 滑動時間超過這個數(shù)值就不會產(chǎn)生滑動事件。
horizontalDistanceThreshold (默認(rèn): 30px) – 水平劃動距離超過這個數(shù)值才會產(chǎn)生滑動事件。
verticalDistanceThreshold (默認(rèn): 75px) – 豎直劃動距離小于這個數(shù)值才會產(chǎn)生滑動事件。
swipeleft（左劃）：劃動事件為向左的方向時觸發(fā)

swiperight（右劃）：劃動事件為向右的方向時觸發(fā)

 

要綁定這些事件，只需要在document.ready()中進(jìn)行編程即可，如下代碼示例：

<!DOCTYPE HTML>
<html>
<head>
 <title>Understanding the jQuery Mobile API</title>
 <link rel="stylesheet" href="jquery.mobile.css" />
 <script src="jquery.js"></script>
 <script type="text/java script">
  $(document).ready(function(){
   $(".tap-hold-test").bind("taphold", function(event) {
    $(this).html("Tapped and held");
   }); 
  });
 </script>
 <script src="jquery.mobile.js"></script>
</head>

<body>
 <div data-role="page" id="my-page">
  <div data-role="header">
      <h1>Header</h1>
    </div>
    <div data-role="content">
      <ul data-role="listview" id="my-list">
        <li class="tap-hold-test">Tap and hold test</li>
      </ul>
  </div>
 </div>
</body>
</html>

從上面的代碼可以看到，將一個list列表跟taphold事件進(jìn)行了綁定，當(dāng)DOM加載完畢后，當(dāng)觸發(fā)taphold事件后，就會顯示Tapped and held的提示信息。


虛擬鼠標(biāo)事件
我們提供了一系列"虛擬的"鼠標(biāo)事件試圖把鼠標(biāo)和觸摸事件抽象 出來。這使得開發(fā)者能夠給一些基礎(chǔ)的鼠標(biāo)事件，例如mousedown, mousemove, mouseup, 和click來注冊監(jiān)聽。插件會在觸摸環(huán)境中，插件會保持在傳統(tǒng)鼠標(biāo)環(huán)境下觸發(fā)的順序，例如：vmouseup總是在vmousedown之前被觸發(fā)，vmousedown總是在 vmouseup 之前，等等。虛擬鼠標(biāo)事件也會把書劍中放出的坐標(biāo)信 息標(biāo)準(zhǔn)化。所以在基于觸摸的設(shè)備中事件對象的pageX, pageY, screenX, screenY, clientX, and clientY這些屬性的坐標(biāo)都可以用。

vmouseover：處理touch 或者 mouseover的正規(guī)化的事件

vmousedown：處理touchstart 或者 mousedown 的正規(guī)化的事件

vmousemove：處理touchmove 或者 mousemove 的正規(guī)化的事件

vmouseup：處理touchend 或者 mouseup 的正規(guī)化的事件

vclick：處理touchend 或者 鼠標(biāo)點擊 的正規(guī)化的事件。在基于觸摸的設(shè)備上，這個事件是在vmouseup事件之后觸發(fā)的。

vmousecancel：處理touch 或者 mouse 的mousecancel的正規(guī)化的事件

警告：小心使用vclick
小心在觸摸設(shè)備使用vclick。Webkit內(nèi)核的瀏覽器會在touchend事 件觸發(fā)后300ms自己生成mousedown, mouseup,和click 3個事件。 這些生成的鼠標(biāo)事件的目標(biāo)會在他們觸發(fā)的時候被計算出來，并且 是基于touch事件的位置，并且有些情況下會在不同的設(shè)備上甚至 相同設(shè)備的不同OS會導(dǎo)致不同的計算結(jié)果。這就意味著原始的點擊 事件的目標(biāo)語瀏覽器自己生成的鼠標(biāo)事件的目標(biāo)元素可能不是同一個。
我們建議在觸摸后可能會改變你點擊的點下面內(nèi)容的事件中，使用 click而不是vclick方法。這樣的事件包括頁面轉(zhuǎn)場和其他的一些行為比如 收縮/伸展 這樣 的 可能會導(dǎo)致屏幕有變化或者內(nèi)容完全被替換的事件。

取消一個元素默認(rèn)點擊的行為
應(yīng)用會調(diào)用一個 vclick 事件來取消某個元素的默認(rèn)點擊事件。在 基于鼠標(biāo)的設(shè)備上，對vclick事件調(diào)用preventDefault()方法等同 于對真實點擊的時間冒泡階段調(diào)用 preventDefault() 方法。在基 于觸摸的設(shè)備上就有點復(fù)雜了，因為真實的點擊事件會在vclick 事件觸發(fā)300毫秒之后觸發(fā)。對于觸摸設(shè)備，對vclick事件調(diào)用 preventDefault()方法會一些vmouse插件的一些代碼來試圖捕獲下 一個點擊事件。所以根據(jù)上述的警告，要匹配一個觸摸事件和與他 對應(yīng)的鼠標(biāo)事件就比較困難，因為他們的目標(biāo)是不同的。所以 vmouse插件試圖通過坐標(biāo)來識別一個相符的點擊事件通常會失敗。
有些情況下兩個事件的目標(biāo)和坐標(biāo)的識別都會失敗，這樣就會導(dǎo)致 點擊事件被觸發(fā)或者元素的默認(rèn)動作會被執(zhí)行，或者內(nèi)容被改變或 者替換的情況下，觸發(fā)了別的元素的點擊事件。如果這樣的bug在給定的元素上有規(guī)律的發(fā)生,我們建議對于動作使 用click來驅(qū)動觸發(fā)。

相關(guān)文章

最新評論