输入框回车触发事件异常：无法进入判断及冒泡问题解决

咱们先拆解下你遇到的两个问题：

为什么最初的代码进不了if分支？ #

你最开始直接给#inputField绑定keyup事件，但大概率是这个元素在PageComplete事件触发时还没完全加载到DOM里——虽然你监听了页面完成事件，但有些动态渲染的元素可能会晚一步出现。这时候给不存在的元素绑定事件，自然不会生效，所以回车的时候根本触发不了回调，更别说进入if分支了。

改成绑定在document上之后生效，是因为用了事件委托：事件委托是把事件绑定在父元素（这里是document）上，当子元素的事件冒泡上来时，父元素会检查目标元素是否匹配选择器，再执行回调。不管子元素是现在存在还是之后动态创建的，都能被捕获到。

怎么解决事件冒泡导致的屏幕闪烁？ #

你改完之后虽然能触发回调，但绑定在document上的全局keyup事件会捕获所有按键的冒泡，而且你把e.preventDefault()放在了if外面——这意味着所有按键都会阻止默认行为，再加上回车事件可能还会触发页面上其他默认行为（比如表单提交），多重触发就导致了屏幕闪烁。

给你一个更合理的解决方案，兼顾元素存在性和避免冒泡：

jQuery(document).one("PageComplete", function(e){ 
  // 保留你的初始化逻辑
  // 用事件委托绑定到#inputField，只监听这个元素的keyup事件
  jQuery(document).on("keyup", "#inputField", function(e) { 
    if (e.which === 13) { 
      // 执行你的业务代码
      console.log("bbq chicken"); 
      // 只在需要处理回车时，阻止默认行为和冒泡
      e.preventDefault();
      e.stopPropagation();
    }
  }); 
});

这个方案的优势： #

• 精准监听：通过事件委托的选择器#inputField，只有这个输入框的keyup事件会触发回调，不会捕获全局的按键事件，减少不必要的处理
• 按需阻止：只在回车触发时调用e.preventDefault()（阻止表单提交等默认行为）和e.stopPropagation()（阻止事件继续向上冒泡），不会影响其他按键的正常输入
• 兼容动态元素：事件委托天然支持动态创建的元素，不用再判断jQuery('#inputField').length

这样改完之后，回车触发逻辑正常，也不会有冒泡导致的屏幕闪烁问题了。

内容的提问来源于stack exchange，提问作者web-dev