Question

所以，我正在尝试与创建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>

有人可以帮我解决这个问题吗？此外，如果您需要其他详细信息，请告诉我们。

Answer 1

它正在清除控制台，因为当您单击“更改”按钮时，它会提交并将表单导航到同一地址，因为它的输入类型是提交（type="submit"）。

要阻止表单提交，请将输入类型更改为按钮：

<input type="button" value="Change" id="btn-change">

或者不要通过使用提交表单：

<form onsubmit="return false;">

或者更安全：

 <form onsubmit="event.preventDefault(); return false;">

或者通过配置控制台

如果表单提交符合您的要求，您可以通过“检查”保留日志选项阻止 chrome console 在发生导航时自行清除，如下所示：

Answer 2

你的表格没有任何处理。因此，在默认行为中，它将重新加载当前页面。你可以通过添加

来避免它

<form onsubmit='return false;'></form>

它将避免刷新页面或者您可以调用自己的自定义函数并添加

return false;

在其中。

事件监听器清除console.log

2 个答案: