模拟html5的触摸事件

simulate touch events for html5

本文关键字:事件 触摸 html5 模拟      更新时间:2023-09-26

我正在构建一个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);

此操作有效,但仅适用于mobile emulation mode

这样会引发触摸事件,但对于real触摸,我有以下数据

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

但是对于自定义事件changedTouches元素为null,是的,我尝试设置e.touches to e.changedTouches

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

从这里开始

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);

这只适用于mobile emulation mode