如何在使用普通JavaScript的grunt運行qunit測試中觸發TouchEvent？

Question

我有要測試的各種觸摸事件的回調。 例如，“ touchstart”事件使用觸摸的坐標來設置類的成員：

NavigationUI.prototype.touchStart = function(evt) {
    this.interacting = true; 
    this.startPoint = this.getTouchXY(evt);
};
NavigationUI.prototype.getTouchXY = function(evt) { 
    var rect = this.element.getBoundingClientRect(); 
    return { 
         x: evt.targetTouches[0].clientX - rect.left,
         y: evt.targetTouches[0].clientY - rect.top
    };
};

我沒有使用jQuery。 要測試此功能，我需要在一個已知的位置創建一個div，創建一個Touch事件以正確設置第一個targetTouches Touch的clientX和clientY變量，然后觸發該事件並檢查回調函數是否應做。 我對鼠標事件有類似的回調。 樣本測試是：

test('test mouseDownCallback', function() {                                   
 var div, evt, navElement;                                                   
 div = document.createElement('div');                                        
 div.setAttribute('style', 'position: fixed; left: 0px; top: 0px;');         
 document.body.appendChild(div);                                             
 navElement = new lasertutor.NavigationUI(div);                              
 evt = document.createEvent("MouseEvent");                                   
 evt.initMouseEvent("mousedown", true, true, window, 1, 0, 0, 0, 0, false, false, false, false, 0, null);
 div.dispatchEvent(evt);                                                     
 ok(navElement.interacting, "mousedown doesn't set interacting");            
 return deepEqual({                                                          
   x: 0,                                                                     
   y: 0                                                                      
 }, navElement.startPoint);
});

但是，似乎沒有文檔可以嘗試針對觸摸事件執行此操作。 似乎對觸摸事件接口的描述無法觸發， 對initTouchEvent函數的Apple Developer頁面沒有任何構造所需的Touch或TouchList參數的方式的引用，以及2011年的另一個SO問題 ，包括用任何位置數據填充“觸摸事件”。

我當前的測試看起來像這樣，並使用Apple Dev頁面中的initTouchEvent規范，並嘗試模擬TouchList和Touch對象：

test("test TouchStartCallback", function() {                                  
 var div, evt, navElement, touch1;                                           
 div = document.createElement('div');                                        
 div.setAttribute('style', 'position: fixed; left: 0px; top: 0px;');         
 document.body.appendChild(div);                                             
 navElement = new lasertutor.NavigationUI(div);                              
 evt = document.createEvent("TouchEvent");                                   
 touch1 = document.createTouch({                                             
   clientX: 0,                                                               
   clientY: 0,                                                               
   id: 0,                                                                    
   pageX: 0,                                                                 
   pageY: 0,                                                                 
   screenX: 0,                                                               
   screenY: 0,                                                               
   target: div                                                               
 });                                                                         
 evt.initTouchEvent("touchstart", true, true, window, 1, 0, 0, 0, 0, false, false, false, false, [touch1], [touch1], [touch1], 1, 0);
 div.dispatchEvent(evt);                                                     
 ok(navElement.interacting, "touchstart doesn't set interacting");           
 return deepEqual({                                                          
   x: 0,                                                                     
   y: 0                                                                      
 }, navElement.startPoint);                                                  
});

我將這個測試作為Qunit任務的一部分進行。 它失敗且沒有錯誤，表示ok或deepEqual斷言都不正確。 此測試的mouseEvent版本通過。

Answer 1

您是否正確使用document.createTouch？ 根據Safari開發人員的說法，您需要傳遞事件發生所在的視圖（窗口）。

createTouch（DOMWindow視圖，EventTarget目標，長標識符，長pageX，長pageY，長screenX，長screenY）

touch1 = document.createTouch(window, div, 1, 0, 0, 0, 0);