以编程方式触发Android上按钮的点击事件答案

【问题标题】：Programmatically trigger click event of button on Android以编程方式触发Android上按钮的点击事件
【发布时间】：2017-06-08 09:49:54
【问题描述】：

我正在使用 Cordova 7.0.1 处理 Ionic 3.3.0 中的 Android TV 控件。由于该设备没有触摸屏，我必须使用遥控器。我正在使用

@HostListener('document:keydown', ['$event'])
handleKeyboardEvent(event: KeyboardEvent) {
  // Check the key code and determine the next element to focus
  // ...

  // Focus the element
  this.renderer.invokeElementMethod(nextElement._elementRef.nativeElement,'focus');
}

检查远程控制推送以改变焦点。这工作正常。当按下回车键时，我希望激活按钮的单击动作。现在我尝试使用类似的东西

@HostListener('document:keydown', ['$event'])
handleKeyboardEvent(event: KeyboardEvent) {
  if(event.key == 'Enter') {
    var focusedButton = Helper.getCurrentlyFocusedButton();
    focusedButton._elementRef.nativeElement.click();
    // Using the debugger I know that these lines are triggered, but nothing happens
  }
}

以编程方式按下按钮。这在将 ionic serve 与 Chrome 一起使用时效果很好，但在 Android 设备上不起作用（Sony KD-49XD7005 和 Android TV 6.0.1）。据我从谷歌搜索收集到的，这是因为不支持点击。但是必须有另一种方式来触发这个事件？我也尝试手动创建触摸事件

var e1 = document.createEvent('TouchEvent'); // Also tried 'UIEvent'
e1.initEvent('touchstart', true, true);

var e2 = document.createEvent('TouchEvent');
e2.initEvent('touchend', true, true);

this.renderer.invokeElementMethod(focusedButton._elementRef.nativeElement, 'dispatchEvent', [e1]);
this.renderer.invokeElementMethod(focusedButton._elementRef.nativeElement, 'dispatchEvent', [e2]);

// Also tried
// focusedButton._elementRef.nativeElement.dispatchEvent(e1);
// focusedButton._elementRef.nativeElement.dispatchEvent(e2);

但最终没有任何效果。有没有办法做到这一点？

【问题讨论】：

标签： javascript cordova ionic-framework android-tv ionic3

【解决方案1】：

我是通过查看 ionic-angular 的源代码自己弄清楚的。在文件node_modules/ionic-angular/tap-click/tap-click.js 中是一个处理click 事件的方法。它调用另一个名为shouldCancelClick(ev) 的方法，当this.dispatchClick 未定义或为false 时返回true。 this.dispatchClick 由绑定到mousedown 事件的pointerStart(ev) 设置。

所以要做的就是在触发click 事件之前触发mousedown 事件。

我是这样解决的：

var e1 = document.createEvent('MouseEvents');
e1.initEvent('mousedown', true, true);
focusedButton.dispatchEvent(e1);

var e2 = document.createEvent('MouseEvents');
e2.initEvent('click', true, true);
focusedButton.dispatchEvent(e2);

【讨论】：