Google Chrome瀏覽器擴展程序看不到點擊？

Question

我無法獲得任何這些事件偵聽器來觸發任何功能。

以下是我的Chrome擴展程序。 警報被觸發，但是沒有偵聽器起作用。 元素是動態創建的，因此我不確定是否會有所不同。

document.addEventListener('DOMContentLoaded', function() {
    document.querySelector('.overlay_show').addEventListener('click', alertit);
    document.querySelector('.overlay_hide').addEventListener('click', alertit);
});

元素html

`<a class='overlay_hide' ><i>Hide<i/></a>`;

`

有什么想法會有所幫助嗎？

Answer 1

元素是動態創建的，因此我不確定是否會有所不同。

是的 如果在添加元素之前添加了偵聽器，它將無法正常工作。 當您執行document.querySelector('.overlay_show') ，它將選擇具有類.overlay_show的第一個元素，並在其上添加一個偵聽器。 完成。

因此，您有2個解決方案：

添加元素后添加偵聽器

但這意味着您每次都必須這樣做

監聽單擊`<body>`並使用`e.target`

document.body.addEventListener('click', function (e) {
    if (e.target.classList.contains('overlay_show')
        || e.target.classList.contains('overlay_hide')) {
        alertit()
    }
}

Google Chrome瀏覽器擴展程序看不到點擊？

問題描述

1 個解決方案

解決方案1
1 已采納 2017-04-26 03:06:46

添加元素后添加偵聽器

監聽單擊`<body>`並使用`e.target`

Google Chrome瀏覽器擴展程序看不到點擊？

問題描述

1 個解決方案

解決方案1 1 已采納 2017-04-26 03:06:46

添加元素后添加偵聽器

監聽單擊<body>並使用e.target

解決方案1
1 已采納 2017-04-26 03:06:46

監聽單擊`<body>`並使用`e.target`