angular/ionic自訂click

標籤：rect   start   tput   eve   tor   this   exp   const   star   

項目既要用於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裡。

angular/ionic自訂click