0

我已经搜索了很多，但我找到的答案都没有 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));

另外，我尝试在 a 中添加按钮 addEventListenerdocument.addEventListener('DOMContentLoaded', function() {....});

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

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

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

4

1 回答 1

2

问题

我不确定在复制到 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);
}
于 2013-01-03T09:00:22.770 回答