javascript - 按回车键刷新待办事项列表

Question

提交待办事项列表项后，页面会刷新。我正在使用 e.stopPropagation() 试图阻止默认页面重新加载(没有帮助)。

这是我的 JavaScript。对于我的完整代码，请参阅我的 CodePen .

$(function() {

  $('.button').click(function(e) {
    e.stopPropagation();
    let toAdd = $('input[name=listItem]').val();
    // Inserts li as first child of ul
    $('ul').prepend('<li>' + toAdd + '</li>');
    // Clears input box after clicking '+'
    $('input[name=listItem]').val('');
  });

  // Upon hitting enter, triggers button click and prevents page from refreshing and event bubbling and capturing/trickling
  $('input[name=listItem]').keypress(function(e) {
    e.stopPropagation();
    if (e.which == 13) {
      $('.button').click();
    };
  });

  $('ul').on('click', 'li', function() {
    // Upon list item click, toggleClass() adds class 'strike' for it and fadeOut() completely hides it
    $(this).toggleClass('strike').fadeOut('slow');
  });

});

Answer 1

在按钮上使用e.preventDefault()来阻止表单提交。在任一处理程序中都不需要 e.stopPropagation。