У меня есть приложение, которое регистрирует события для элементов svg.
Я использую MaterializeCSS 1.0, который упаковывает Hammer2.0.4, и использую Jquery.
Я зарегистрировал события касания, подобные этому, и после прочтения: https://developers.google.com/web/updates/2017/01/scrolling-intervention
Я стараюсь не вызывать warnDefault ():
Hammer(ui).on('tap', function (event) {
// Hammer handling event => events are objects
event.srcEvent.stopPropagation();
// event.srcEvent.preventDefault();
event.srcEvent.cancelBubble = true;
// event.preventDefault();
if(event.stopPropagation) event.stopPropagation();
else event.cancelBubble=true;
// alert('yo');
highlightNode(node.id);
....// rest of the code, with Async promises)
}, false) // => passing false
function highlightNode(nodeId) {
// remove the class currentNodeMarker => note, the array to cycle through is always length 1
var els = document.getElementsByClassName("currentNodeMarker");
for (var i = els.length - 1; i >= 0; i--) {
els[i].classList.remove('currentNodeMarker');
}
// add class to the child 'circle' of my element
var circle = document.getElementById('data-' + nodeId).getElementsByClassName("node-circle")[0];
circle.classList.add('currentNodeMarker');
};
}
CSS содержит небольшой переход:
circle {
transition: all 0.2s
}
функция, которую я хочу выполнить немедленно, является highlightNode (), которая уведомляет пользователя о том, что его жест был принят во внимание.
Я вижу, что событие записывается немедленно (предупреждение('yo')), но highlightNode (), кажется, запускается даже после того, как обещания разрешены:
В мобильном есть отставание, очень заметное.
Теперь я незнать, является ли "нормальным" поведением, в том смысле, что функция выполняется сразу, и это всего лишь механизм рендеринга браузера, который требует времени для стилизации элемента.
Возможно ли этопричина?
Или это связано с отсутствием passive : true - https://github.com/hammerjs/hammer.js/pull/987?
Я думал об этом из-за предупреждения от Chrome: [Violation] 'pointerUp' от Materialise (которыйследует слушать событие от Hammer) - хотя предупреждение не делаетувольнять всегда.Но в любом случае существует разница между сенсорным действием и визуальным стилем.
Как я могу улучшить свой код, чтобы пользователь сразу уведомлялся о «визуальном» действии в мобильном телефоне?
Как я могу улучшить отзывчивость, чтобы быть уверенным, что события обрабатываются должным образом, например, в соответствии с новыми функциями {passive : true }, или не прослушиваются несколько раз jquery, Hammmer и Materialize, использующими их?
PS
Мне известна вкладка «Быстродействие» в Chrome, но она не работает для оценки подключенного устройства - она вылетает: / Поэтому рассмотрите альтернативное предложение для отладки событий.