当我单击提交按钮时，.preventDefault() 或 .stopPropagation() 都不会阻止我的页面重新加载

Question

我有一个搜索框和一个搜索按钮。我可以点击搜索按钮并弹出结果，没问题，工作正常。我还想通过按 Enter 来添加搜索功能，所以我添加了一些代码来监听按键，并在按键释放时单击我的按钮。但是，这会导致表单被提交并重新加载没有数据的页面。我尝试将 preventDefault() 和 stopPropagation() 添加到事件侦听器中，但无论如何，当我按 Enter 时，表单会被提交。它会在一瞬间显示正确的信息，但随后会立即重新加载页面。

这是 HTML：

<script defer src="https://use.fontawesome.com/releases/v5.0.10/js/all.js" integrity="sha384-slN8GvtUJGnv6ca26v8EzVaR9DC58QEwsIk9q1QXdCU8Yu8ck/tL/5szYlBbqmS+" crossorigin="anonymous"></script>

<div class="container-fluid">
  <div class="row search-box" id="firstRow">
    <div class='col-10 search-head-two'>
      <form class="form">
        <input type="text" class="search-input" id="term">
      </form>
    </div>
    <div class='col-2 search-head-one'>
      <button id="search"><i class="fa fa-search"></i></button>
    </div>
    </div>
  </div>
</div>

这里是 Javascript：

var content = [];

document.getElementById("term")
  .addEventListener("keyup", function(event) {
  event.stopPropagation();
  event.preventDefault();
  if (event.keyCode === 13) {
    document.getElementById("search").click();
  }
});

document.getElementById("search").onclick = function() {getData()};

function getData() {
  var domain = "https://en.wikipedia.org/w/api.php?&origin=*&action=opensearch&search=" + encodeURI(document.getElementById('term').value) + "&limit=10";
  fetch(domain).then(function(resp) {
    return resp.json()
}).then(function(data) {
    for (var i = 1; i < data.length; i++) {
      content.push(data[i]);
    }
    var content1 = content[0];
    var content2 = content[1];
    var content3 = content[2];
    for (var x = 0; x < content[0].length; x++) {
      addRow(content1, content2, content3, x);
    }
    console.log(content[0]);
    console.log(content[1]);
    console.log(content[2]);
  });
}

function addRow(content1, content2, content3, x) {
  var div = document.createElement('div');

  div.className = 'row';
  div.innerHTML = '<div class="col-3" id="title">\
                   <p>' + content1[x] + '</p>\
                   </div>\
                   <div class="col-9" id="content">\
                   <p>' + content2[x] + '</br></br><a target="_blank" href="' + content3[x] + '">' + content3[x] + '</a></p>\
                   </div>';
  document.getElementById('firstRow').appendChild(div);
}

另外需要注意的是，我使用 Bootstrap 4、Jquery 和 Jquery UI 作为外部脚本。我在 CodePen.io 中运行它。

Answer 1

我将 event.preventDefault() 移到 if 子句中，并将 eventListener 从 keyup 更改为 keydown，因为表单是在 keydown 而不是 keyup 上提交的。现在它就像一个魅力。

document.getElementById("term")
  .addEventListener("keydown", function(event) {
  if (event.keyCode === 13) {
    event.preventDefault();
    document.getElementById("search").click();
  }
});

Answer 2

检查this。

preventDefault() 上的一些有用的 MDN 信息 此外，您不能从 Ajax 请求中获得任何回报。