实战中的高大频场景

想象一下 你正在开发一个麻烦的表单提交系统，用户填写完信息后点击提交按钮，你期望页面跳转至另一个页面而不是刷新鲜当前页面。但现实总是残酷的，点击按钮后页面竟然自动刷新鲜了！这无疑让用户体验巨大打折扣。又或者， 你正在制作一个在线考试系统，用户随机选择题目进行作答，点击提交后页面却自动刷新鲜，弄得用户之前的答案丢失。这些个场景是不是让你头痛不已？别担心，今天我们就来揭开这玩意儿神秘面纱。

在探讨怎么别让页面刷新鲜之前，我们先来了解一下浏览器的默认行为。浏览器自带的反应， 如点击链接跳转页面、按回车键提交表单、右键点击弹出菜单等，这些个行为就像刻在浏览器DNA里的本能反应。但在有些情况下我们需要打破这些个常规，让页面按照我们的预期来施行操作。

虽然新潮浏览器都支持preventDefault方法，但IE8及以下版本需要特别处理。如果遇到兼容性问题， 能这样写：

        
            // 父元素.addEventListener {
                if  {
                    e.preventDefault;
                } else {
                    e.returnValue = false;
                }
            });
        
    

当然眼下除非要维护上古项目，基本不用考虑这种兼容性问题。沉点是把核心原理吃透，遇到特殊需求时晓得去哪里找解决方案。

下面要介绍的是阻止默认行为的杀手锏——preventDefault。这玩意儿方法就像给浏览器的本能反应按了暂停键。用方法如下：

        
            document.getElementById.addEventListener {
                e.preventDefault;
                // 你的自定义逻辑
            });
        
    

沉点来了：事件对象e非...不可作为参数传给处理函数。这玩意儿方法就像行路捕快的停车手势，直接把浏览器的默认动作拦腰截住。

有时候明明写了阻止代码，但默认行为还是会发生。这时候要检查事件传播机制。比如在父元素和子元素都绑定了点击事件：

        
            // 父元素.addEventListener {
                e.preventDefault;
            });
            // 子元素.addEventListener {
                console.log;
            });
        
    

不过要注意，这种方式只在通过属性绑定事件时有效。如果用addEventListener注册事件监听器，return false就彻头彻尾失效了。这种不一致性三天两头让新鲜手踩坑，所以更推荐统一用preventDefault。

有些教程里会看到在HTML里直接写onclick="return false;"。这种方法确实能生效，但就像用算盘做微积分——不是不行，就是太原始了。下面是一个对比示例：

        
            // 方法一：用onclick属性
            点击我
            // 方法二：用addEventListener
            
            
        
    

明摆着， 第二种方法更加灵活，容易于维护，推荐用。

虽然这玩意儿技巧很有力巨大，但不能滥用。比如在可编辑区域阻止键盘输入的默认行为，会弄得用户无法正常输入文字。再比如阻止了超链接的默认跳转，但记不得添加替代的导航逻辑，就会发明出“死链接”。用时要足够考虑用户需求和场景，避免适得其反。

通过本文的介绍，相信你已经掌握了别让页面刷新鲜的技巧。在实际开发中，合理运用这些个方法，能够提升用户体验，让你的网页更加流畅、美观。当然这只是一个基础技巧，前端开发的领域还有很许多值得探索的地方。祝愿你在前端开发的道路上越走越远，成为一名优秀的前端工事师！

---