按钮不响应Ionic中的点击

时间:2016-09-02 08:37:40

标签: javascript canvas ionic-framework ionic2

我将以下按钮完全定位在canvas元素上:

<button class="left">Left</button>

这是应该响应按钮点击的JavaScript:

$(".left").mousedown(function() {
   leftTimer = setTimeout(moveLeft, 10);
}).mouseup(function() {
   clearTimeout(leftTimer);
});

var leftTimer,
moveLeft = function() {
  if (circleX > 0) {
    circleX -= 4;
  }
  $("h1.title").text('Clicked Left');
  leftTimer = setTimeout(moveLeft, 10);
};

我添加了标题行以检查是否有延迟。当我正常点击按钮时,标题不会发生变化。我必须按住按钮一段时间才能将文本更改为“单击左侧”或移动我的目标元素。即使这样,我第一次触摸按钮的时间与文本更改的时间之间也存在相当大的延迟。这是为什么 ?如果我需要提供更多信息,请告诉我。

1 个答案:

答案 0 :(得分:2)

你应该在你的Ionic应用程序中使用Angular,并在你想要处理的div上使用ng-click元素。

根据文档,AngularJS是必需的:

  

Ionic目前需要AngularJS才能充分发挥其潜力。虽然您仍然可以使用框架的CSS部分,但您将错过强大的UI交互,手势,动画和其他内容。

这是一个JSBin,用于使您在HTML和AngularJS之间建立基本绑定:https://jsbin.com/rifigakube/edit?html,js,output

如果您是这项技术的新手,这里有一个开始使用AngularJS的列表(如果您了解Javascript,它很容易学习):

最后,当你认为你对AngularJS有足够的信心时:https://scotch.io/tutorials/create-your-first-mobile-app-with-angularjs-and-ionic

(我真的建议你在做最后一次之前先学习AngularJS,否则你会陷入困境)

希望这有帮助。