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请求返回任何内容。

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

2 个答案: