Question

我正在使用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。我在这里想念什么吗？

Answer 1

我知道了。似乎无法使用#ffffff00将不透明度更改为#ffffff22在Android中工作。解决方法是使用rgba(255, 255, 255, 0)到rgba(255, 255, 255, 50)或更改opacity。

Ionic：Touchstart和Touchend不会在Android上触发

1 个答案: