提交待办事项时页面自动刷新，e.stopPropagation()无效求助

嘿，我太懂你遇到的这个烦恼了！你用e.stopPropagation()没效果是因为找错了方向——这个方法是用来阻止事件冒泡到父元素的，但你现在要解决的是表单默认的提交重载行为，得用e.preventDefault()才行！

问题根源 #

你的按钮应该是嵌套在<form>标签里的吧？当点击按钮或者按下回车键时，浏览器会自动触发表单的默认提交动作，这才是页面刷新的罪魁祸首。stopPropagation()管的是事件往上传递，完全管不到这个默认行为哦。

修改后的代码 #

$(function() {
  $('.button').click(function(e) {
    // 关键：阻止表单默认提交行为
    e.preventDefault();
    let toAdd = $('input[name=listItem]').val().trim();
    
    // 先判断输入内容不为空，避免添加空项
    if (toAdd) {
      $('ul').prepend('<li>' + toAdd + '</li>');
      $('input[name=listItem]').val('');
    }
  });

  // 补充处理回车键提交的情况，同样要阻止默认行为
  $('input[name=listItem]').keypress(function(e) {
    // 判断是否按下回车键（keyCode 13）
    if (e.which === 13) {
      e.preventDefault();
      // 直接触发按钮的点击事件，复用现有逻辑
      $('.button').click();
    }
  });
});

几点说明 #

• e.preventDefault()：专门用来取消当前事件的默认动作，这里就是阻止表单提交导致的页面刷新，这才是你真正需要的方法。
• 输入内容去空判断：用trim()去掉首尾空格，避免用户输入空内容或者全空格时添加无效的待办项。
• 回车键复用逻辑：按下回车时直接触发按钮的点击事件，不用重复写添加待办项的代码，让逻辑更简洁。

内容的提问来源于stack exchange，提问作者nCardot