瞭解了Touch Event的類型與屬性之後，接下來就按照實作的原理來撰寫JavaScript，完成我們要防止的事件。其原理如下：
「補捉touchstart事件，識別觸發的來源者，是否為指定的HTML標籤並且是onClick沒有指派任務者，取消原本要觸發的事件處理」。
‧實作程式碼：
1: //document.load時所觸發的事件
2: $(function() {
3: //註冊document需補捉touchstart的事件，並指定touchHandler為處理者；
4: document.addEventListener("touchstart", touchHandler, true);
5: });
6:
7: //Touch Event處理者
8: function touchHandler(event) {
9: var node = event.touches[0].target;
10: //比對只要是TD元素，而且onclick沒有設定時，則不能允許觸發事件。
11: if (node.onclick == null && node.tagName == 'TD') event.preventDefault();
12: }
‧實作結果：
[2011/06/27.. ..Pou：補充新的解法]
1: function touchHandler(event) {
2: var node = event.touches[0].target;
3: //比對只要是TD元素，而且onclick沒有設定時，則不能允許觸發事件。
4: if (node.onclick == null && node.tagName == 'TD') {
5: //判斷是否為數字組合的字串, false代表是由數位, true代表不是(201-2)
6: if (isNaN(node.innerText) == false) {
7: //全數位時，超過5碼就要擋下來，不然就會電話號碼
8: if (node.innerText.length > 5) {
9: event.preventDefault();
10: }
11: } else {
12: //true時要多判斷是否存在數位與中線同時存在
13: if (hasMatch(node.innerText)) {
14: event.preventDefault();
15: }
16: }
17: }
18: }
這個解法可以擋掉可能全部都為數字的字串之外，也可以阻掉TD等其他的元件。另外，針對preventDefault()的使用，
要特別注意，因為如果當Scroll的事件觸發在指定的TD上時，可能會造成Scroll的功能失敗，因此，此方法也解決了這些
問題。由於Android與iPhone在對數位識別的指定的meta可以擋掉。但我還是喜歡使用JavaScript來做，因為可以確保
自己要阻擋的範圍與增加需要的事件處理。
======
看到這裡，也許你會有個疑問，為何我只阻擋了"TD"的HTML標籤，其實要阻擋的範圍可以非常廣的，因為我嘗試過，
如果在<div>、<span>、<b>...等集合類型的元素中，出現如同"2010-07-19-000000001"這種字串的話，一樣會出現撥號畫面，
因此，如果要增加防範的條件式，我建議先考慮幾個專案：
(a) 如果網頁要增加指定的撥號功能，採用的方式是使用javascript觸發？還是由Server觸發？或是使用<a>來指定？
(b) 阻擋條件的增加，HTML集合標籤都有可能出現數位字串，需要配合(a)的使用機制來調整阻擋條件的指定。
全站熱搜
留言列表
