欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

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

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

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

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

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

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

swiperight（右劃）：劃動(dòng)事件為向右的方向時(shí)觸發(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>

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


虛擬鼠標(biāo)事件
我們提供了一系列"虛擬的"鼠標(biāo)事件試圖把鼠標(biāo)和觸摸事件抽象 出來。這使得開發(fā)者能夠給一些基礎(chǔ)的鼠標(biāo)事件，例如mousedown, mousemove, mouseup, 和click來注冊(cè)監(jiān)聽。插件會(huì)在觸摸環(huán)境中，插件會(huì)保持在傳統(tǒng)鼠標(biāo)環(huán)境下觸發(fā)的順序，例如：vmouseup總是在vmousedown之前被觸發(fā)，vmousedown總是在 vmouseup 之前，等等。虛擬鼠標(biāo)事件也會(huì)把書劍中放出的坐標(biāo)信 息標(biāo)準(zhǔn)化。所以在基于觸摸的設(shè)備中事件對(duì)象的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)點(diǎn)擊 的正規(guī)化的事件。在基于觸摸的設(shè)備上，這個(gè)事件是在vmouseup事件之后觸發(fā)的。

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

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

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

相關(guān)文章

最新評(píng)論