單擊我的提交按鈕時，.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請求中得到任何回報。