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

Question

In my extension, I'm trying to make a bunch of buttons.在我的扩展中，我试图制作一堆按钮。 Each of the numbers is a button, so all cells in the table except the header "Save" and "Load".每个数字都是一个按钮，因此表格中除标题“保存”和“加载”之外的所有单元格。

[![enter image description here][1]][1] So my goal is 20 buttons, 1-9 (& 0) on the left that do a save action & 10 more that load. [![在此处输入图像描述][1]][1] 所以我的目标是 20 个按钮，左侧的 1-9 (& 0) 执行保存操作和 10 个以上的加载操作。 I made click handlers for each button and am generating the table dynamically.我为每个按钮制作了点击处理程序并动态生成表格。
Here's a section of the relevant code in my script linked from my popup html page这是从我的弹出 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))
        })
    }
}

Popup html page弹出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>

I have it working if I view popup.html in a new tab and it also works here isolated as a jsfiddle如果我在新选项卡中查看popup.html ，它就可以工作，并且它也可以在此处作为 jsfiddle 隔离使用
The problem is when I use it as a chrome extension, the table cell I click, isn't the correct target of the event handler问题是当我将它用作 chrome 扩展时，我单击的表格单元格不是事件处理程序的正确目标

Right now I'm just loggin the target to console to see what's happening (I want to make the buttons actually do things later)现在我只是将目标登录到控制台以查看发生了什么（我想让按钮稍后实际执行操作）
When I click the 1 in the Save column, it logs #save2当我单击“保存”列中的 1 时，它会记录#save2
When I click the 2 in the save column, it logs #save3当我单击保存列中的 2 时，它会记录#save3
When I click the <th> which contains the word "Save", it logs, #save1当我单击包含“保存”一词的<th> ，它会记录#save1
Row 9 & 0 don't respond when clicked so appear to have no event handlers单击第 9 行和第 0 行时没有响应，因此似乎没有事件处理程序

Basically, everything is shifted up 1 row and I don't know why基本上，一切都向上移动了 1 行，我不知道为什么
It's working fine as pure JavaScript and on the fiddle, but somehow the target is wrong它作为纯 JavaScript 和小提琴工作正常，但不知何故目标是错误的

Here's a zip folder of the entire extension 这是整个扩展的 zip 文件夹

EDIT: Problem Screenshot编辑：问题截图
Look what happens when I click the "Save" cell.看看当我单击“保存”单元格时会发生什么。
It should NOT even be a button because this is a <th> element , yet somehow it registers a click.它甚至不应该是一个按钮，因为这是一个<th>元素，但它以某种方式注册了一次点击。
Notice also, that it logs td#save1 even though where I clicked was above the <td> that actually gets logged.另请注意，即使我单击的位置在实际记录的<td>上方，它也会记录td#save1 。
And after row 8 they don't even register clicks在第 8 行之后，他们甚至不记录点击次数

Answer 1

I finally tracked it down to the fact that I had enabled 125% scaling on my main laptop screen, but somehow it wasn't enabled on my external displays.我最终将其归结为我在笔记本电脑主屏幕上启用了125%缩放的事实，但不知何故它没有在我的外部显示器上启用。 (I recently got new monitors and maybe that setting didn't transfer when I hooked up the new displays). （我最近买了新显示器，也许当我连接新显示器时该设置没有转移）。 Making them all 125% or all 100% fixes the issue.使它们全部125%或全部100%解决了问题。

This seems like an edge case and isn't Chrome's fault, but this is the only time I've ever had problems with multiple monitors.这似乎是一个极端情况，并不是 Chrome 的错，但这是我唯一一次遇到多台显示器的问题。 I guess just something to watch out for.我想只是需要注意的事情。

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

问题描述

1 个解决方案

解决方案1
0 已采纳 2018-01-21 17:24:01

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

问题描述

1 个解决方案

解决方案1 0 已采纳 2018-01-21 17:24:01

解决方案1
0 已采纳 2018-01-21 17:24:01