Question

我一直用js编码chrome扩展弹出窗口，用参数调用。

这里是html文件

<!DOCTYPE html>
<html>
<head></head>
<body>
 <p id="demo">=a</p>
    <button type="button" id="do-count1">Count1</button>
    <button type="button" id="do-count2">Count2</button>  
  <script src="popup.js"></script>
</body>
</html>

因为chrome extension js必须分开

popup.js

var a=0;
 function count(k) {
     a = a + k;
     document.getElementById('demo').textContent = a;
}
document.getElementById('do-count1').onclick = count(2);
document.getElementById('do-count2').onclick = count(5);

打开弹出窗口时，它给出7，因为这2个函数自动执行而不点击。按钮不起作用。

问了一个类似的问题 The Chrome extension popup is not working, click events are not handled

但我的问题提前一步，因为我需要使用参数onclick调用js函数。

Answer 1

目前您正在分配函数调用的结果，而不是函数引用。

您的选择是：

使用bind()创建一个将传递参数的函数包装器：
```
element1.onclick = count.bind(null, 2);
element2.onclick = count.bind(null, 5);
```
注意：onclick函数的this会以这种方式丢失。

或使用简单的函数包装器：

element1.onclick = function() { count(2) };
element2.onclick = function() { count(5) };

注意：onclick函数的this将以这种方式丢失，以保留它：

element1.onclick = function() { count.call(this, 2) };
element2.onclick = function() { count.call(this, 5) };

使用HTML属性：

popup.html：

<button type="button" id="do-count1" data-add="2">Count1</button>
<button type="button" id="do-count2" data-add="5">Count2</button>

popup.js：

function count() {
    document.getElementById('demo').textContent = a = a + this.dataset.add;
}
element1.onclick = count;
element2.onclick = count;

Chrome扩展程序 - 参数不起作用的js

1 个答案: