Так работают ли события касания в ионном режиме? Получите screenX с помощью фреймворка Angular

Может ли фреймворк ionic использовать события касания, как в js?

Именно так:

htmlElement.addEventListener('touchstart',function(e){
  var t = htmlElement.touches[0];
  var output = t.screenX + " , " + t.screenY;  
},false);   

htmlElement.addEventListener('touchmove',function(e){
  htmlElement.preventDefault();
  var t = htmlElement.touches[0];
  var output = t.screenX + " , " + t.screenY; 
},false);

Мне нужно значение t.screenX и t.screenY в ionic

спасибо за вашу помощь ?

🤔 А знаете ли вы, что...
Angular имеет собственную систему маршрутизации для управления переходами между страницами в одностраничных приложениях.


231
2

Ответы:

Конечно, возможно, добиться этого можно так:

var element = document.getElementsByClassName('htmlelement');
element[0].addEventListener('click', (e: any) => {
  console.info("clicked");
});
container[0].addEventListener('touchstart',function(e){
  console.info("Touchstart");
}); 

Однако обычно лучший способ объявить обработчики событий в ionic - это определить его в HTML:

 <button (touchstart) = "foo($event);">Element 1</button> 
 <button (touchend) = "foo($event);">Element 2</button>

А затем объявите функцию в компоненте, который обрабатывает эти события.

foo (event) {
     // Function logic here
}

Решено

Так что неправильного при доступе к screenX, screenY из обычной привязки angular (щелчок)?

https://stackblitz.com/edit/ionic-nnjrcy

если вы привязываете событие с помощью $ в шаблоне:

<div (click) = "getEvent($event)"></div>

В вашем методе getEvent вы можете получить доступ к исходному объекту события DOM, который содержит screenX, Y и т. д.

getEvent(event) {
    alert(
      "Your screen X: "+ event.screenX +" and Y : "+event.screenY
    )
    console.info(event.screenX)
    console.info(event.screenY)
  }

Событие (щелчок) обрабатывается hammer.js в Ionic 3, и оно должно работать как для сенсорного ввода, так и для мыши.

для прикосновения можно также использовать (касание) привязку. Тогда screenX, screenY должны быть доступны внутри пути event.srcEvent

И если вы все еще хотите выполнить привязку к низкоуровневому событию касания / мыши самостоятельно, в идеале вам нужно использовать «рендерер», чтобы гарантировать, что ваш код остается «отделенным» от dom:

// check your Angular version to know which Renderer you need to import:
import { Renderer2 } from "@angular/core";

// inject it:
constructor(
    private renderer: Renderer2
    etc
)

// use ViewChild to bind to DOM element:
@ViewChild('mainSVG') mainSVG: ElementRef;

// do binding in life cycle hook for instance:
ionViewDidLoad() {
    this.renderer.listen(this.mainSVG.nativeElement, 'touchstart', this.startInputEvent)
}

Это выглядит более сложным, и для простых проектов, я думаю, можно игнорировать, но в целом лучше позволить Angular касаться dom и решать его по-своему.