Я использую Ionic v3.0 и пытаюсь создать директиву, которая будет покрывать элемент наложением при касании и удалять это наложение после завершения касания. Пока что я написал это:
import {Directive, ElementRef, HostListener, Renderer2} from '@angular/core';
@Directive({
selector: '[tappable]' // Attribute selector
})
export class TappableDirective {
private readonly _overlay;
constructor(private _elmRef: ElementRef, private _renderer: Renderer2) {
this._overlay = _renderer.createElement('div');
this._renderer.setStyle(this._overlay, 'position', 'absolute');
this._renderer.setStyle(this._overlay, 'width', '100%');
this._renderer.setStyle(this._overlay, 'height', '100%');
this._renderer.setStyle(this._overlay, 'background', '#ffffff00');
this._renderer.setStyle(this._overlay, 'left', '0');
this._renderer.setStyle(this._overlay, 'top', '0');
this._renderer.setStyle(this._overlay, 'display', 'block');
this._renderer.setStyle(this._overlay, 'transition', '0.2s');
_renderer.appendChild(_elmRef.nativeElement, this._overlay);
}
@HostListener('touchstart')
tapped() {
this._renderer.setStyle(this._overlay, 'background', '#ffffff22')
}
@HostListener('touchend')
untapped() {
this._renderer.setStyle(this._overlay, 'background', '#ffffff00')
}
}
Это прекрасно работает, когда я запускаю свое приложение на эмуляторе iOS, но это не относится к Android. Кажется, что touchstart и touchend не срабатывают, когда я взаимодействую с элементом. Я что-то здесь пропустил?
@SergeyRudenko Я только что попробовал, безрезультатно. Я не думаю, что проблема в названии, поскольку оно работает на iOS.
Понятно. Если добавить лог консоли в тачстарт, он не срабатывает?
@SergeyRudenko видимо да! Но укладка не применяется.
ах, тогда я думаю, что знаю, в чем проблема;) если ты не понимаешь, я могу помочь
Разобрался :), выложил ответ.
Я понял. Похоже, изменение прозрачности с помощью #ffffff00
на #ffffff22
не работает в Android. Способ обойти это - использовать rgba(255, 255, 255, 0)
в rgba(255, 255, 255, 50)
или заменить opacity
.
Вы пробовали изменить селектор на что-то другое? «Tappable» раньше зарезервировался ionic