单击我的提交按钮时，.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

检查一下 。

有关preventDefault（）的一些有用的MDN信息。此外，您不能从Ajax请求中得到任何回报。