bem-core icon indicating copy to clipboard operation
bem-core copied to clipboard

Не отрабатывает pointerclick на мобильном устройстве

Open JiLiZART opened this issue 9 years ago • 9 comments

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 молчит

JiLiZART avatar Jan 27 '16 13:01 JiLiZART

должно починиться после #1088

veged avatar Feb 03 '16 12:02 veged

@JiLiZART можешь взять bem-core@v3 и проверить, воспроизводится ли?

veged avatar Apr 13 '16 08:04 veged

Попробую в project-stub проверить

JiLiZART avatar Apr 13 '16 09:04 JiLiZART

@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

JiLiZART avatar Apr 20 '16 21:04 JiLiZART

Собрал тестовый стенд: http://tadatuta.github.io/temp/desktop.bundles/index/index.html http://tadatuta.github.io/temp/touch.bundles/index/index.html

Проблему подтверждаю.

tadatuta avatar Apr 21 '16 09:04 tadatuta

По поводу кейса 1 — замените alert на console.log и все будет работать. При показе системного alert в момент pointerpress никаких кликов не случается, что достаточно логично.

dfilatov avatar Apr 21 '16 13:04 dfilatov

Да, pointerclick перестал работать в тачах на неинтерактивных элементах. Будем чинить.

dfilatov avatar Apr 21 '16 14:04 dfilatov

а может кто-то проверить как оно на Андройдах себя ведёт?

veged avatar Apr 25 '16 11:04 veged

need port to v4

veged avatar Nov 14 '16 12:11 veged