События касания, теряющие свойство `touch` при срабатывании в контексте расширения Chrome
Я пытаюсь смоделировать сенсорные события из расширения Chrome. Я использую инструменты разработчика в режиме устройства для имитации сенсорного браузера.
Когда я запускаю код, который имитирует сенсорное событие в контексте документа (выбор <top frame>
в выпадающем списке инструментов разработчика) все работает нормально. Однако когда я запускаю один и тот же код в контексте любого расширения (например, AdBlock), сенсорное событие достигает обработчика события без touches
а также changedTouches
свойства (они undefined
).
Это дефект в Chrome или я что-то упустил?
Когда я касаюсь красной области, я получаю следующий вывод:
Получил настоящее сенсорное событие 1
(The 1
количество прикосновений пальцев).
Когда я имитирую прикосновение, я получаю следующий вывод:
Получил смоделированное сенсорное событие 1
Если я скопирую JavaScript в dev-tools в контексте расширения
Я получаю следующий вывод:
Получил настоящее событие прикосновения ноль
(Реально, потому что у меня нет доступа к захваченным simulated
переменная, это не относится к этому вопросу).
Изменить: Я отправил отчет об ошибке в проект Chromium на случай, если это действительно ошибка.
Код следует:
var count = 0;
function log(msg) {
var out = document.getElementById('output');
out.innerHTML = ++count + ': ' + msg + '<br/>' + out.innerHTML;
}
var simulated = false;
function message() {
return 'Got ' + (simulated ? 'simulated' : 'real') + ' touch event ';
}
function fire() {
simulated = true;
var event = document.createEvent('Event');
event.initEvent('touchstart', true, true);
var element = document.getElementById('x');
event.touches = createTouchList(createTouch(element, {
x: 5,
y: 5
}, 42));
element.dispatchEvent(event);
}
window.fire = fire;
function createTouch(element, point, id) {
if (document.createTouch)
return document.createTouch(window, element, id, point.x, point.y, point.x, point.y);
return {
view: window,
target: element,
identifier: id || 0,
pageX: point.x,
pageY: point.y,
clientX: point.x,
clientY: point.y
};
}
function createTouchList(touches) {
if (document.createTouchList)
return document.createTouchList(touches);
if (Array.isArray(touches))
return touches;
return [touches];
}
log('listening');
document.getElementById('x').addEventListener('touchstart', function(e) {
log(message() + (e.touches ? e.touches.length : 'null'));
simulated = false;
}, true);
<h1 id="x" style="height: 50px; background-color: red; text-align:center">Touch here</h1>
<h1 onclick="fire()" style="height: 30px; background-color: cyan; text-align:center">Simulate touch event</h1>
<h3 id="output"></h3>