弹出窗口中的 Chrome 扩展点击事件处理程序捕获错误的目标答案

【问题标题】：Chrome Extension click event handlers in popup capturing wrong target弹出窗口中的 Chrome 扩展点击事件处理程序捕获错误的目标
【发布时间】：2018-06-29 08:13:05
【问题描述】：

在我的扩展程序中，我正在尝试制作一堆按钮。每个数字都是一个按钮，所以表格中除了标题“保存”和“加载”之外的所有单元格。

[![在此处输入图像描述][1]][1] 所以我的目标是 20 个按钮，左侧的 1-9（和 0）执行保存操作，另外 10 个加载。我为每个按钮制作了点击处理程序，并动态生成了表格。
这是从我的弹出 html 页面链接到的脚本中相关代码的一部分

$(document).ready(populateGroupButtons)

function populateGroupButtons(){
    const groups=[1, 2, 3, 4, 5, 6, 7, 8, 9, 0]     //group 0 is at the end
    let table=$('#groupButtons')
    groups.forEach((group)=>{
            table.append(
            '<tr>'+
                '<td id="save'+group+'">'+
                    group+
                '</td>'+
                '<td id="load'+group+'">'+
                    group+
                '</td>'+
            '</tr>'
        )
    })

    $(document).ready(registerClickHandlers)
}

function registerClickHandlers(){
    let table = $('#groupButtons')
    for(let group=0; group<=9; group++){
        $('#save'+group).click((e)=>{
            console.log($('#save'+group))
        });
        $('#load'+group).click((e)=>{
            console.log($('#load'+group))
        })
    }
}

弹出html页面

<!DOCTYPE html>
<html>
<head>
    <script type='text/javascript' src='jquery-min.js'></script>
    <link href='css/style.css' type='text/css' rel="stylesheet">
</head>
<body>
    <h1>Popup</h1>
    <table id='groupButtons'>
        <tr>
            <th>Save</th>
            <th>Load</th>
        </tr>
    </table>
    <p>Open console to see output</p>
    <script type='text/javascript' src='popup-script.js'></script>
</body>
</html>

如果我在新选项卡中查看popup.html 和it also works here isolated as a jsfiddle，我可以正常工作
问题是当我将它用作 chrome 扩展时，我的表格单元格点击，不是事件处理程序的正确目标

现在我只是将目标登录到控制台以查看发生了什么（我想让按钮稍后实际执行操作）
当我单击保存列中的 1 时，它会记录 #save2
当我单击保存列中的 2 时，它会记录 #save3
当我单击包含“保存”一词的<th> 时，它会记录#save1
第 9 行和第 0 行在单击时没有响应，因此似乎没有事件处理程序

基本上，所有内容都向上移动了 1 行，我不知道为什么
它作为纯 JavaScript 和小提琴工作正常，但不知何故目标是错误的

Here's a zip folder of the entire extension

编辑：问题截图
看看当我单击“保存”单元格时会发生什么。
它甚至不应该是一个按钮，因为这是一个 <th> 元素，但它以某种方式注册了一次点击。
另请注意，它会记录td#save1，即使我点击的位置高于实际记录的<td>。
在第 8 行之后，他们甚至不记录点击次数

【问题讨论】：

从 zip 文件夹中检查了你的代码，它实际上工作正常，没有任何变化。顺便说一句，我建议您使用 event delegation 而不是在每个按钮上附加事件。
@Deliaz 我添加了一个屏幕截图和更详细的问题解释，因为它仍然不适合我。我什至删除了扩展程序，再次安装它，在另一个帐户的 chrome 浏览器中尝试了它，但没有任何效果。而且我知道为每个按钮制作大量的点击处理程序并不理想，但如果我让按钮真正识别它们的目标，我会稍后解决这个问题
我遇到了你的问题，再次检查一下macos和windows中的代码，以防万一。它仍然可以正常工作。您确定 ZIP 文件夹包含最新/实际代码吗？
@Deliaz 我发现它可以在我的笔记本电脑屏幕上运行，但我一直在我的 2 台外接显示器上进行测试，这就是问题发生的时候。我在 Windows 10 上，所有 3 个都设置为 1080p，但是当我转到 whatismyscreenresolution.net 时，我的 2 个外部显示器显示为 1920 X 1080，而我的笔记本电脑屏幕是 1538 X 864。也许这个浏览器分辨率与本机分辨率。我还在 Windows“缩放和布局”中启用了 125% 缩放，但我不明白这会如何影响事情。我希望我的扩展程序可以在所有显示器上运行，也许这是一个边缘案例，但有什么想法吗？
这个案例听起来很有趣，也许我会尝试在不同的规模上进行测试。您也可以在 chromium 中查看任何相关的bugs。

标签： javascript jquery google-chrome-extension dynamic-content

【解决方案1】：

我终于找到了一个事实，即我在我的笔记本电脑主屏幕上启用了125% 缩放，但不知何故，它没有在我的外部显示器上启用。（我最近买了新显示器，也许当我连接新显示器时该设置没有转移）。 将它们全部设为125% 或全部设为100% 可解决此问题。

这似乎是一个边缘案例，并不是 Chrome 的错，但这是我唯一一次遇到多显示器问题。我想只是需要注意的地方。

【讨论】：