專案既要用於PC網頁，又要在iPad之類的移動裝置上使用。 在iPad上的這種大屏裝置上使用者的手指點選按鈕時，可能會發生一個細微的位移導致不能觸發click事件。 會給使用者一種不太靈敏的感覺，為解決此問題我自己寫一個指令代替click。

貼上程式碼：

@Directive({
    selector: '[yun-click]'
})

export class YunClickDirective implements OnInit, OnDestroy {
    @Output('yun-click') eventClick = new EventEmitter();

    unsubscribe: () => void;

    constructor(private platform: Platform,
                private renderer: Renderer2,
                private element: ElementRef) {
    }

    ngOnInit() {
        if (this.platform.is('mobile') || this.platform.is('mobileweb') || this.platform.is('phablet') || this.platform.is('tablet')) {
            this.yunTouch();
        } else {
            this.yunClick();
        }
    }

// touch事件，移動端且滑動距離小於30px時觸發
    yunTouch() {
        let startX, startY, endX, endY;
        // 監聽touchstart
        this.unsubscribe = this.renderer.listen(
            this.element.nativeElement, 'touchstart', (event: TouchEvent) => {
                let touch = event.targetTouches[0];
                startX = touch.pageX;
                startY = touch.pageY;
                console.log(startX, startY);
            });
        // 監聽touchmove
        this.unsubscribe = this.renderer.listen(
            this.element.nativeElement, 'touchmove', (event: TouchEvent) => {
                let touch = event.targetTouches[0];
                endX = touch.pageX;
                endY = touch.pageY;
                console.log(endX, endY);
            });
        // 監聽touchend
        this.unsubscribe = this.renderer.listen(
            this.element.nativeElement, 'touchend', (event: TouchEvent) => {
                let distanceX = Math.abs(endX - startX), distanceY = Math.abs(endY - startY);
                console.log(distanceX, distanceY);
                let distance = Math.sqrt((Math.pow(distanceX, 2) + Math.pow(distanceY, 2)));  // 計算滑動距離
                console.log(distance);
                if (distance < 30 || !endX || !endY) {  // 沒有滑動時，不觸發touchmove，需要判斷
                    this.eventClick.emit(event);
                }
            });
    }

// click事件
    yunClick() {
        this.unsubscribe = this.renderer.listen(
            this.element.nativeElement, 'click', event => {
                console.log(event);
                this.eventClick.emit(event);
            });
    }
    
    ngOnDestroy() {
        this.unsubscribe();
    }
    
}

 

使用時和click一樣使用,只要把click換成yun-click。哦 不要忘記新增到module裡。