模拟 html5 的触摸事件
simulate touch events for html5
我正在构建一个 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 元素为空,是的,我尝试设置 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
我正在构建一个 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 元素为空,是的,我尝试设置 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