问题

Question

我搜索了很多，而且我发现的答案都没有100％完成。

基本上，我希望弹出窗口显示一些按钮，然后使用不同的参数调用相同的函数。概念：

<button onclick="foo(1,2);">Button 1</button>
<button onclick="foo(2,3);">Button 2</button>

我尝试了一些简单直接的方法，但都没有。如果我从函数中取出代码，并让popup.js包含代码，它就可以工作（我的函数很好）。

我试过了：

$('#btn1').click(function(e) {
    alert('btn1');
});

以及

document.getElementById('btn1').addEventListener('click',doSomething(1,2));

另外，我尝试在document.addEventListener('DOMContentLoaded', function() {....});

中添加按钮addEventListener

奇怪的是，如果我的popup.js包含button.addEventListener，则在单击浏览器操作时会触发第一个，然后无效。无论click事件列表器是否在DOMContentLoaded侦听器内，都会发生这种情况。

我觉得这是一个CSP问题，但我似乎无法让它发挥作用。

对于那些扫描问号的人：在popup.html / popup.js中，如何根据onclick事件调用具有不同参数的单个函数？

Answer 1

问题

我不确定复制到SO时是否只是通过缩写，但是您提供的代码都没有“粘贴”：

按钮上没有id，所以绑定到id（我假设这只是因为它们与第一次粘贴无关！）
第二个粘贴使用jQuery库，因此您需要确保包含并允许jQuery：https://stackoverflow.com/a/10928761/969807
在第三个粘贴中，addEventListener的第二个参数应该是一个接受事件的函数，作为第一个也是唯一的参数（如果需要）。（继续阅读）

解决方案

在您描述的场景中绑定事件的最常见方式是：

document.getElementById('btn1').addEventListener('click', function (){
    foo(1, 2);
}, false);

然而，如果有很多（或可变数量）的按钮，我可能会这样做：

popup.html：

<div id="buttons">
  <button data-param1="1" data-param2="2">Button 1</button>
  <button data-param1="2" data-param2="3">Button 2</button>
</div>

popup.js：

var els = document.querySelectorAll('#buttons button'),
    i, total, param1, param2;

for (i = 0, total = els.length; i < total; i++) {
  el = els[i];

  param1 = parseInt(el.getAttribute('data-param1'));
  param2 = parseInt(el.getAttribute('data-param2'));

  el.addEventListener('click', function (){ foo(param1, param2) }, false);
}

如何将事件绑定到chrome扩展弹出窗口中的元素

1 个答案:

问题

解决方案