Не отрабатывает pointerclick на мобильном устройстве
bem-core 2.8.0 Дестктоп Google Chrome 48.0.2564.82 Мобильник iPhone 4, Google Chrome 47.0.2526.107
Имеем такой код блока.
provide(BEMDOM.decl(this.name, /** @lends Footer.prototype */{
_onMenuClick: function (e) {
alert('menu');
}
}, /** @lends Footer */{
live: function () {
this.liveBindTo('menu', 'pointerpress', this.prototype._onMenuClick);
this.liveBindTo('menu', 'pointerclick', this.prototype._onMenuClick);
return this.__base.apply(this, arguments);
}
}));
На десктопе все отрабатывает отлично, в режиме эмуляции мобильного устройства тоже все прекрасно.
На мобильнике, pointerpress отрабатывает, alert выводится, а вот pointerclick молчит
должно починиться после #1088
@JiLiZART можешь взять bem-core@v3 и проверить, воспроизводится ли?
Попробую в project-stub проверить
@veged Итак, имеем Десктоп Google Chrome 50.0.2661.75 Мобильник iPhone 4, Google Chrome 47.0.2526.107 Cделал небольшой воркэраунд для проверки бага https://github.com/JiLiZART/project-stub/tree/pointerclick-bug
В блоке определены события, по клику на них выскакивает alert(eventName)
this.liveBindTo('menu', 'click', this.prototype._onClick);
this.liveBindTo('menu', 'pointerclick', this.prototype._onPClick);
this.liveBindTo('menu', 'pointerpress', this.prototype._onPPress);
Кейс 1.
На десктопе:
Клик по элементу, выскакивает только pointerpress alert.
На десктопе в режиме эмуляции:
Клик по элементу, выскакивает только pointerpress alert.
На мобилке:
Клик по элементу, выскакивает только pointerpress alert.
Соотвественно ожидается, что после pointerpress последуют click, pointerclick, но такого не происходит. Баг? Фича?
Кейс 2.
Комментируем this.liveBindTo('menu', 'pointerpress', this.prototype._onPPress);
На десктопе:
Клик по элементу, выскакивает click, далее pointerclick alert
На десктопе в режиме эмуляции:
Клик по элементу, выскакивает click, далее pointerclick alert
На мобилке:
Клик по элементу, ничего не происходит.
На MDN по этому поводу пишут https://developer.mozilla.org/en-US/docs/Web/Events/click
Safari Mobile 7.0+ (and likely earlier versions too) suffers from a bug where click events aren't fired on elements that aren't typically interactive (e.g.
) and which also don't have event listeners directly attached to the elements themselves (i.e. event delegation is being used). See this live example for a demonstration. See also Safari's docs on making elements clickable and the definition of "clickable element".Учитывая что у Chrome и Safari на iOS движок одинаковый, то поведение идентичное.
Первый вариант с попыткой обойти баг через
cursor: pointerна элемент, не работает.Второй, добавляю
onclick="void(0)"элементу на который назначены события черезlive, на мобилке все начинает работать.//cc @tadatuta
Собрал тестовый стенд: http://tadatuta.github.io/temp/desktop.bundles/index/index.html http://tadatuta.github.io/temp/touch.bundles/index/index.html
Проблему подтверждаю.
По поводу кейса 1 — замените alert на console.log и все будет работать. При показе системного alert в момент pointerpress никаких кликов не случается, что достаточно логично.
Да, pointerclick перестал работать в тачах на неинтерактивных элементах. Будем чинить.
а может кто-то проверить как оно на Андройдах себя ведёт?
need port to v4