Question

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

[！[在此处输入图片说明] [1]] [1] 所以我的目标是20个按钮，左边的1-9（＆amp; 0）执行保存操作＆amp;加载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行＆amp;单击时0不响应，因此似乎没有事件处理程序

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

Here's a zip folder of the entire extension

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

Answer 1

我最后跟踪了我在我的主笔记本电脑屏幕上启用125%缩放的事实，但不知怎的，它在我的外部显示器上没有启用。（我最近买了新的显示器，当我连接新的显示器时，这个设置可能没有转移）。 全部125%或全部100%解决问题。

这似乎是一个边缘情况，并不是Chrome的错，但这是我唯一一次遇到过多台显示器的问题。我想要注意一些事情。

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

1 个答案: