jQuery實現刪除li節點的方法
740
2024-02-10
觸摸事件(touch)
在 jQuery Mobile 中有一些觸摸事件是可定制的。然而，這些事件僅當與支持觸摸功能的設備進行交互的用戶訪問您的 jQuery Mobile 網站時才可用。當這些事件可用時，您可以觸發任何自定義java script 作為對五種不同的事件的響應tap、taphold、swipe、swipeleft 和 swiperight。
tap(輕擊)：一次快速完整的輕擊后觸發
taphold（輕擊不放）：輕擊并不放（大約一秒）后觸發
swipe(滑動)：一秒內水平拖拽大于30PX，或者縱向拖曳小于20px的事件發生時觸發的事件。多長時間拖拽多少px可以設置的。這個事件有其相關聯的屬性，分別為
scrollSupressionThreshold (默認: 10px) ? 水平方向拖拽大于這個值，將不觸發。
durationThreshold (默認: 1000ms) ? 滑動時間超過這個數值就不會產生滑動事件。
horizontalDistanceThreshold (默認: 30px) ? 水平劃動距離超過這個數值才會產生滑動事件。
verticalDistanceThreshold (默認: 75px) ? 豎直劃動距離小于這個數值才會產生滑動事件。
swipeleft（左劃）：劃動事件為向左的方向時觸發
swiperight（右劃）：劃動事件為向右的方向時觸發
要綁定這些事件，只需要在document.ready()中進行編程即可，如下代碼示例：
<!DOCTYPE HTML>
<html>
<head>
<title>Understanding the jQuery Mobile API</title>
<link rel="stylesheet" />
<script src="http://www.gimoo.net/t/1904/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="http://www.gimoo.net/t/1904/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事件進行了綁定，當DOM加載完畢后，當觸發taphold事件后，就會顯示Tapped and held的提示信息。
虛擬鼠標事件
我們提供了一系列"虛擬的"鼠標事件試圖把鼠標和觸摸事件抽象 出來。這使得開發者能夠給一些基礎的鼠標事件，例如mousedown, mousemove, mouseup, 和click來注冊監聽。插件會在觸摸環境中，插件會保持在傳統鼠標環境下觸發的順序，例如：vmouseup總是在vmousedown之前被觸發，vmousedown總是在 vmouseup 之前，等等。虛擬鼠標事件也會把書劍中放出的坐標信 息標準化。所以在基于觸摸的設備中事件對象的pageX, pageY, screenX, screenY, clientX, and clientY這些屬性的坐標都可以用。
vmouseover：處理touch 或者 mouseover的正規化的事件
vmousedown：處理touchstart 或者 mousedown 的正規化的事件
vmousemove：處理touchmove 或者 mousemove 的正規化的事件
vmouseup：處理touchend 或者 mouseup 的正規化的事件
vclick：處理touchend 或者 鼠標點擊 的正規化的事件。在基于觸摸的設備上，這個事件是在vmouseup事件之后觸發的。
vmousecancel：處理touch 或者 mouse 的mousecancel的正規化的事件
警告：小心使用vclick
小心在觸摸設備使用vclick。Webkit內核的瀏覽器會在touchend事 件觸發后300ms自己生成mousedown, mouseup,和click 3個事件。 這些生成的鼠標事件的目標會在他們觸發的時候被計算出來，并且 是基于touch事件的位置，并且有些情況下會在不同的設備上甚至 相同設備的不同OS會導致不同的計算結果。這就意味著原始的點擊 事件的目標語瀏覽器自己生成的鼠標事件的目標元素可能不是同一個。
我們建議在觸摸后可能會改變你點擊的點下面內容的事件中，使用 click而不是vclick方法。這樣的事件包括頁面轉場和其他的一些行為比如 收縮/伸展 這樣 的 可能會導致屏幕有變化或者內容完全被替換的事件。
取消一個元素默認點擊的行為
應用會調用一個 vclick 事件來取消某個元素的默認點擊事件。在 基于鼠標的設備上，對vclick事件調用preventDefault()方法等同 于對真實點擊的時間冒泡階段調用 preventDefault() 方法。在基 于觸摸的設備上就有點復雜了，因為真實的點擊事件會在vclick 事件觸發300毫秒之后觸發。對于觸摸設備，對vclick事件調用 preventDefault()方法會一些vmouse插件的一些代碼來試圖捕獲下 一個點擊事件。所以根據上述的警告，要匹配一個觸摸事件和與他 對應的鼠標事件就比較困難，因為他們的目標是不同的。所以 vmouse插件試圖通過坐標來識別一個相符的點擊事件通常會失敗。
有些情況下兩個事件的目標和坐標的識別都會失敗，這樣就會導致 點擊事件被觸發或者元素的默認動作會被執行，或者內容被改變或 者替換的情況下，觸發了別的元素的點擊事件。如果這樣的bug在給定的元素上有規律的發生,我們建議對于動作使 用click來驅動觸發。
