8
让我们开始与一些事件监听器:如何触发触摸事件?
window.addEventListener('scroll', function (e) {
console.log('scroll', e);
});
window.addEventListener('touchstart', function (e) {
console.log('touchstart', e);
});
window.addEventListener('touchmove', function (e) {
console.log('touchmove', e);
});
window.addEventListener('touchend', function (e) {
console.log('touchend', e);
});
我需要以编程触摸文档中{pageX: 0, pageY: 0}
位置,将其移动到{pageX: 0, pageY: 100}
并结束触摸事件。
为此,我要构建一个帮助函数TouchEvent
,它将触发指定元素上的触摸事件。
/**
* @see https://gist.github.com/sstephenson/448808
* @see https://developer.apple.com/library/iad/documentation/UserExperience/Reference/TouchEventClassReference/TouchEvent/TouchEvent.html
* @see http://stackoverflow.com/questions/18059860/manually-trigger-touch-event
*/
function touchEvent (element, type, identifier, pageX, pageY) {
var e,
touch,
touches,
targetTouches,
changedTouches;
touch = document.createTouch(window, element, identifier, pageX, pageY, pageX, pageY);
if (type == 'touchend') {
touches = document.createTouchList();
targetTouches = document.createTouchList();
changedTouches = document.createTouchList(touch);
} else {
touches = document.createTouchList(touch);
targetTouches = document.createTouchList(touch);
changedTouches = document.createTouchList(touch);
}
e = document.createEvent('TouchEvent');
e.initTouchEvent(type, true, true, window, null, 0, 0, 0, 0, false, false, false, false, touches, targetTouches, changedTouches, 1, 0);
window.dispatchEvent(e);
};
我将确保文档被加载并发送代表先前商定的场景的触摸事件。
document.addEventListener('DOMContentLoaded', function() {
var identifier = new Date().getTime(),
element = document,
i = 0;
touchEvent(element, 'touchstart', identifier, 0, 0);
while (i++ < 100) {
touchEvent(element, 'touchmove', identifier, 0, i);
}
touchEvent(element, 'touchend', identifier, 0, i);
});
预期的是,touchstart
,touchmove
和touchend
事件被触发。意外的是,scroll
事件没有被触发,并且文档的实际“触摸”未反映在当前文档中。
window.addEventListener('scroll', function (e) {
console.log('scroll', e);
});
window.addEventListener('resize', function (e) {
console.log('resize', e);
});
window.addEventListener('touchstart', function (e) {
console.log('touchstart', e);
});
window.addEventListener('touchmove', function (e) {
console.log('touchmove', e);
});
window.addEventListener('touchend', function (e) {
console.log('touchend', e);
});
/**
* @see https://gist.github.com/sstephenson/448808
* @see https://developer.apple.com/library/iad/documentation/UserExperience/Reference/TouchEventClassReference/TouchEvent/TouchEvent.html
* @see http://stackoverflow.com/questions/18059860/manually-trigger-touch-event
*/
function touchEvent (element, type, identifier, pageX, pageY) {
var e,
touch,
touches,
targetTouches,
changedTouches;
if (!document.createTouch) {
throw new Error('This will work only in Safari browser.');
}
touch = document.createTouch(window, element, identifier, pageX, pageY, pageX, pageY);
if (type == 'touchend') {
touches = document.createTouchList();
targetTouches = document.createTouchList();
changedTouches = document.createTouchList(touch);
} else {
touches = document.createTouchList(touch);
targetTouches = document.createTouchList(touch);
changedTouches = document.createTouchList(touch);
}
e = document.createEvent('TouchEvent');
e.initTouchEvent(type, true, true, window, null, 0, 0, 0, 0, false, false, false, false, touches, targetTouches, changedTouches, 1, 0);
window.dispatchEvent(e);
};
document.addEventListener('DOMContentLoaded', function() {
var identifier = new Date().getTime(),
element = document,
i = 0;
touchEvent(element, 'touchstart', identifier, 0, 0);
while (i++ < 100) {
touchEvent(element, 'touchmove', identifier, 0, i);
}
touchEvent(element, 'touchend', identifier, 0, i);
});
#playground {
background: #999; height: 5000px;
}
<div id="playground"></div>
什么是我的设置缺少让浏览器解释触摸事件,如果这些是由最终用户发出的?实质上,我希望浏览器能够响应一系列以编程方式触发的触摸开始,移动和结束事件进行滚动。
document.createTouch()is [deprecated](https://developer.mozilla.org/en-US/docs/Web/API/Document/createTouch)。 现在您必须使用[Touch](https://developer.mozilla.org/en-US/docs/Web/API/Touch_events)界面。女巫似乎并没有在着名的浏览器中实现。 – 2017-01-25 08:31:31