Chrome扩展程序将不会运行按钮单击功能

问题描述：

我有这个代码，它会擦除您所在网站的html并将其复制到剪贴板。我目前有一个工作版本，当你点击铬图标时复制文本，但我想添加更多的选项，所以我试图在扩展弹出窗口中的按钮点击上运行脚本。Chrome扩展程序将不会运行按钮单击功能

不幸的是，我无法为我的生活设法得到按钮点击发生的事情！当我用alert（“hi”）替换我的函数时，当我单击扩展图标而不是弹出窗口中的按钮时，它会弹出警报。帮帮我！！！

document.addEventListener('DOMContentLoaded', function() { 
 
     document.getElementById("full_team").addEventListener('click', alert("HI"));;  
 
});

<body> 
 
\t <h2>Click to copy your roster</h2> 
 
\t <button id="full_team">Full Team</button> 
 
\t <script src="event.js"></script> 
 
</body>

请进行【小例子（http://stackoverflow.com/help/mcve）一切与你所看到的行为无关;你甚至可以在这个过程中自己解决问题。 – Xan 2014-10-10 13:39:10

好吧，我添加了一个仍然不起作用的代码片段。 – Emily 2014-10-10 14:16:59

+1适当地做一个最小的例子。 – Xan 2014-10-10 14:32:16

答

addEventListener期望事件名称，并且应该被执行的功能的引用。

但是，alert("HI")不是对函数的引用。此语句执行警报，并返回undefined。

有两种方法来解决这个问题：

对于应执行短期功能，您可以使用匿名函数构造。声明
```
function(){ alert("HI"); } 
```
不会执行警报，但会返回对调用时将执行警报的函数的引用。所以，你的代码就变成了：
```
document.getElementById("full_team").addEventListener('click', function() { 
    alert("HI"); 
}); 
```
对于较长的功能，或可重复使用的功能，只是做了一个名为功能：
```
function sayHi() { 
    alert("HI"); 
} 
```
同样，这个定义的函数，但是不执行它。然后，你可以使用函数的名称：
```
document.getElementById("full_team").addEventListener('click', sayHi); 
```
一定要通过参考函数，而不是执行它：的重用功能
```
// Wrong! 
document.getElementById("full_team").addEventListener('click', sayHi()); 
```

说起，假设你想做一个参数相关函数。例如，假设您希望能够根据哪个元素被按下而对各种人说“嗨”。

然后，你可以去更高水平，使返回功能的功能：通过去掉

function sayHiTo(name) { 
    return function() { 
    alert("Hi, " + name + "!"); 
    } 
} 

// Here, invoking the function is correct: it will return a function 
document.getElementById("full_team").addEventListener('click', sayHiTo("Bob"));

感谢您的回答，不幸的是，这听起来像我的例子不是一个很好的最小例子，因为我的真实代码和其他努力确实通过了一个函数。首先尝试:)如果我尝试你的第二个例子，警报出现并消失在闪存中，任何想法为什么会发生？传递我的getTeam函数仍然没有出现任何操作。 – Emily 2014-10-10 15:01:52

好吧，然后尝试调试你的代码。要检查弹出窗口，请右键单击扩展按钮并选择“检查弹出窗口”。 – Xan 2014-10-10 15:03:58

当我使用SayHi函数和我自己的函数与弹出窗口交互时，控制台日志中没有任何内容。我可以使用getElementById来查找我的按钮，没问题。我不确定该从哪里出发，刚开始学习时：/ – Emily 2014-10-10 15:08:01

Chrome扩展程序将不会运行按钮单击功能

相关推荐