CODEWITHSUNDEEP
ionic-frameworkionic3
boring91
boring91

Reputation: 1121

Ionic: Touchstart and Touchend don't trigger on Android

I'm using Ionic v3.0 and trying to create a directive that will cover an element with an overlay when it's touched and remove that overlay once the touch ends. So far I wrote this:

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')
  }

}

This works just fine when I run my app on an iOS emulator, but it's not the case with Android. It seems that the touchstart and touchend do not get triggered when I interact with the element. Did I miss something here?

Upvotes: 0

Views: 637

Answers (1)

boring91
boring91

Reputation: 1121

I figured it out. Looks like changing the opacity using #ffffff00 to #ffffff22 does not work in Android. The way to go around it is by using rgba(255, 255, 255, 0) to rgba(255, 255, 255, 50) or changing the opacity.

Upvotes: 1

Related Questions