为HTML5模拟触摸事件

4
我正在构建一个HTML5游戏,希望能够通过编程方式向浏览器发送多点触控事件。我的想法是设置一个节点服务器并将事件转发到网页上。是否有已经实现这一功能的库,或者我能否模拟这样的事件呢?例如,this page支持多点触控,但在桌面上无法进行交互,因为只有鼠标。如果我能够模拟这些事件,那么我就可以与对象进行交互。我正在寻找类似于此的东西...任何指针都会有所帮助...我尝试使用::。
var e = document.createEvent('UIEvent');
e.initUIEvent('touchstart', true, true);
e.touches = [{pageX: x, pageY: y}];

我之前试过上述方法但没有得到回应,后来我尝试了以下方法。
var e = document.createEvent('TouchEvent');
e.touches = [{pageX: x, pageY: y}];

如果我不处于移动仿真模式下,就会出现错误,但是当我切换到移动仿真模式后,没有任何响应。

我也尝试过 :: this,但没有成功。

更新

从这里

var type = 'move'; // or start, end
var event = document.createEvent('TouchEvent');
event.initEvent('touch' + type, true, true);     
event.constructor.name; // Event (not TouchEvent)

var point = {x: 10, y: 10 };
event.touches = [{
    identifier: Date.now() + i,
    pageX: x,
    pageY: y,
    screenX: x,
    screenY: y,
    clientX: x,
    clientY: y
}, {  identifier: Date.now() + i,
    pageX: point.x,
    pageY: point.y,
    screenX: point.x,
    screenY: point.y,
    clientX: point.x,
    clientY: point.y}]

    dispatchEvent(event);

这个方法能够在移动端模拟下使用

使用该方法会触发一个触摸事件,但是在真实的触摸操作下,数据表现如下

TouchEvent {metaKey: false, altKey: false, shiftKey: false, ctrlKey: false, changedTouches: TouchList…}

但是使用自定义事件时,changedTouches元素为null,我尝试将e.touches设置为e.changedTouches

TouchEvent {metaKey: false, altKey: false, shiftKey: false, ctrlKey: false, changedTouches: null}
1个回答

1

从这里开始

var type = 'move'; // or start, end
var event = document.createEvent('Event');
event.initEvent('touch' + type, true, true);     
event.constructor.name; // Event (not TouchEvent)

var point = {x: 10, y: 10 };
event.touches = [{
    identifier: Date.now() + i,
    pageX: x,
    pageY: y,
    screenX: x,
    screenY: y,
    clientX: x,
    clientY: y
}, {  identifier: Date.now() + i,
    pageX: point.x,
    pageY: point.y,
    screenX: point.x,
    screenY: point.y,
    clientX: point.x,
    clientY: point.y}]

    dispatchEvent(event);

这个可以工作,但只在“移动仿真模式”下。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接