Может ли фреймворк 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 имеет собственную систему маршрутизации для управления переходами между страницами в одностраничных приложениях.
Конечно, возможно, добиться этого можно так:
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 и решать его по-своему.