所以，我正在尝试创建 chrome 扩展。
发生了一些奇怪的事情，单击我的输入提交后，它会清除我的控制台日志(更像是刷新我的索引页面)。
这是我的 app.js 页面
var color = document.getElementById('fontColor');
var colors;
function addListenerMulti(element, eventNames, listener){
var events = eventNames.split(' ');
for (var i=0; i<events.length; i++) {
element.addEventListener(events[i], listener);
}
}
addListenerMulti(color, 'change paste color', function(){
colors = document.getElementById("fontColor").value;
console.log(colors);
});
document.getElementById('btn-change').addEventListener("click", function() {
chrome.tabs.query({active: true, currentWindow:true}, function(tabs) {
chrome.tabs.sendMessage(tabs[0].id, {todo: "changeColor", clickedColor: colors})
});
和 Index.html 文件。
<html>
<head>
<link rel="stylesheet" href="css/style.css">
<title> Tinder Auto Swipe </title>
</head>
<body>
<h2> Select the color </h2>
<form>
<input type="text" class="jscolor" id="fontColor" value="#AB2567">
<input type="submit" value="Change" id="btn-change">
</form>
<!-- Scripts -->
<script src = "scripts/jscolor.min.js">
</script>
<script src="app.js">
</script>
<script src="scripts/jquery-3.3.1.min.js">
</script>
</body>
</html>
有人可以帮我解决这个问题吗？另外，如果您需要更多详细信息，请告诉我。
最佳答案
它正在清除控制台，因为当您单击“更改”按钮时，它会提交表单并将其导航到相同的地址，因为它的输入类型是提交(type="submit")。
要阻止表单提交，请将输入类型更改为按钮:
<input type="button" value="Change" id="btn-change">
或者不要使用以下方式让表单提交:
<form onsubmit="return false;">
或更安全地:
<form onsubmit="event.preventDefault(); return false;">
或者通过配置控制台
如果您希望提交表单，您可以通过“选中”保留日志选项来防止 chrome 控制台在发生导航时自行清除，如下所示:
关于javascript - 事件监听器清除console.log，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49220895/