首页 > 解决方案 > 触摸事件是否像这样在离子中起作用?使用 Angular 框架获取 screenX

问题描述

离子框架是否能够像在 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 值

感谢您的帮助

标签: angularionic-framework

解决方案


这当然是可能的,你可以这样实现:

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

然而,通常在 ionic 中声明事件处理程序的更好方法是在 HTML 中定义它:

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

然后在组件中声明一个处理这些事件的函数

foo (event) {
     // Function logic here
}

推荐阅读