2017-06-08 119 views
0

我正在使用Cordova 7.0.1正确处理Ionic 3.3.0中的Android TV控件。由于设备没有触摸屏,我必须使用遥控器。我正在使用以编程方式触发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上使用离子服务器时,此功能正常工作,但在Android设备上不起作用(使用Android TV 6.0.1的Sony KD-49XD7005)。据我可以从谷歌收集,这是因为点击不支持。但是,必须有另一种方式来触发这一事件?我也尝试手动创建触摸事件

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); 

但最终没有奏效。有没有办法做到这一点?

回答

0

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