如何手動觸發點擊事件？

我的test-comp顯示在一個頁面的多個位置，我想在點擊test-comp或點擊文檔時點擊它們。

@Component({ 
    selector: 'test-comp', 
    template: `<div *ngIf="showMe">stuff</div> and more…` 
}) 

export class TestComponent { 
    showMenu: boolean; 

    constructor(public elementRef: ElementRef) { 
    } 

    @HostListener('document:click', ['$event']) 
    documentClick(event: MouseEvent) { 
    //hide my component when there is a document click  
    this.toggleComponent(); 
    } 

    toggleComponent() { 
    // I am trying to programmatically fire a document click here to hide all test-comp if the test-comp 
    // component itself is clicked 
    // this.elementRef.nativeElement will select all test-comp component but not sure what to do next 
    this.showMe = !this.showMe; 
    }

我不知道如何以編程方式激發文檔點擊我toggleComponent方法內。有沒有辦法做到這一點？非常感謝！

來源

2017-08-03 Jwqq

點擊任何元素將向上冒泡到文檔和文件'：click'將trigerred –

這當前的代碼不能正常工作？您的測試版是文檔的一部分 – Huangism

問題是我在父dom元素上有一個event.propagation（）設置，所以它不會冒泡。 – Jwqq

您可以通過使用HTMLElement.click()觸發任何元素上click事件：

document.getElementById('myEl').click()

你不能在文件點擊，因爲它不是一個表現的元素。但是，你可以點擊全身：

document.body.click()

來源

2017-08-03 18:55:53

謝謝，但我需要觸發文檔點擊，而不是從元素的點擊。 +1 – Jwqq

@Jwqq然後你可以_click_身體html元素。看到我更新的答案:) –

工程就像一個魅力。謝謝。 – Jwqq

如何手動觸發點擊事件？

回答

相關問題