1

處理表面平板電腦上觸摸/指針事件的最佳方式是什麼?我發現它的行爲很混亂。 我寫道,只設置了所有的事件處理程序,以找出事件是如何燒製的腳本(設置本機事件處理程序,使用jQuery的UI):指針事件IE11 /表面

$.each([ 
    "touchstart","touchmove","touchend", 
    "mousedown","mousemove","mouseup", 
    "pointerdown","pointermove","pointerup", 
    "MSPointerDown","MSPointerMove","MSPointerUp" 
], function(i,eventname) { 

    tester.addEventListener(this, function(e) { 
     msg(eventname,e); 
     if ($("#prevent").is(":checked")) { 
      e.preventDefault(); 
     } 
     if ($("#stop").is(":checked")) { 
      e.stopPropagation(); 
     } 
     if ($("#stopimmediate").is(":checked")) { 
      e.stopImmediatePropagation(); 
     } 

    }, false); 
}); 

使用鼠標墊或桌面IE11,一切都很好。所有三個事件(鼠標,指針,MSPointer)按照預期的順序被觸發:向下,向上移動。

但是,當我使用tochscreen

  • 起初pointermove火災,則指針向下。在屏幕上我的手指周圍出現一個矩形。而移動我的手指
  • 射擊沒有進一步的事件,當我移動手指取出

我在做什麼錯了,當

  • 重複移動事件被解僱了我的手指
  • pointerend事件?調用preventDefault,stopPropagation或stopImmediatePropagation不會更改此行爲。設置css pointer-events:none;禁用所有事件。

    Complete script on codepen

  • 回答

    0

    試試我的觸摸手勢抽象庫,DeepTissue。 IE的觸摸模型非常簡單,因爲指針事件將所有的輸入模式抽象成一個通用的API。 Chrome使事情變得複雜,但這是另一回事:)。

    你真的不想涉足所有事件。我知道這會讓人困惑。這就是我寫Deeptissue的原因。它使您不必編寫所有的管道代碼,並選擇最佳選項並掛接到該事件集。

    +0

    謝謝,我會看看它。 – Joschi 2014-10-10 10:52:53

    +0

    給我你的任何反饋! – 2014-10-10 15:42:13

    1

    您需要使用touch-action CSS屬性來防止用戶在用手指或觸控筆拖動屏幕時瀏覽器的平移和縮放行爲。

    例如:

    #prevent, #stop, #stopimmediate { 
        touch-action: none; 
    } 
    
    +0

    嗡嗡聲,這只是禁用所有事件。不是我想要的。 – Joschi 2014-10-10 10:54:15