以编程方式触发 Android 上按钮的单击事件

Question

我目前正在使用 Cordova 7.0.1 在 Ionic 3.3.0 中开发 Android 电视控件。由于该设备没有触摸屏，我必须使用遥控器。我正在使用

@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
  }
}

以编程方式按下按钮。在 Chrome 上使用 ionic serve 时效果很好，但在 Android 设备上不起作用（Sony KD-49XD7005 with 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);

但最终没有任何效果。有什么办法吗？

Answer 1

我是通过查看ionic-angular的源代码自己弄明白的。在文件 node_modules/ionic-angular/tap-click/tap-click.js 中是一个处理 click 事件的方法。当 this.dispatchClick 未定义或为 false 时，它调用另一个名为 shouldCancelClick(ev) 的方法 returns 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);

以编程方式触发 Android 上按钮的单击事件

Programmatically trigger click event of button on Android

javascript

cordova

ionic-framework

android-tv

ionic3