阻止表单提交与动态UI控制方法

考虑以下HTML结构，其中包含一个搜索栏和一个搜索按钮：

<div class="search">
    <form action="" method="GET">
        &lt;input type=&quot;text&quot; name=&quot;search&quot; value=&quot;&quot; placeholder=&quot;search member..&quot;&gt;
        <button class="search_btn">
            <i class="fas fa-search" style="font-size: 18px;"></i>
        </button>
    </form>
</div>
<div class="container">
    <div class="content">
        <!-- 这里是需要动态隐藏/显示的页面内容 -->
        <p>这是一些示例内容。</p>
    </div>
</div>

以及相应的CSS来控制内容的显示与隐藏：

.container .content.hide {
    display: none;
}
.container .content {
    display: block;
    margin: 20px;
    background: #f2f5f9;
}

当尝试通过JavaScript点击 search_btn 来切换 .content 元素的 hide 类时，如果 search_btn 位于一个 内部，并且没有明确阻止其默认行为，那么每次点击都会导致表单提交和页面重载。页面重载会清除所有通过JavaScript进行的DOM操作和状态，使得 .content 元素始终保持其初始可见状态，从而无法实现预期的动态隐藏效果。

初始的JavaScript尝试如下：

const search_btn = document.querySelector(".search_btn");
const content = document.querySelector(".content");

search_btn.addEventListener("click", search);

let se = false; // 用于追踪内容显示/隐藏状态的变量

function search() {
    if (!se) {
        content.classList.add("hide");
        se = true;
    } else {
        content.classList.remove("hide");
        se = false;
    }
}

尽管上述JavaScript代码逻辑正确，能够根据 se 变量的状态添加或移除 hide 类，但由于表单的默认提交行为，每次点击后页面都会重载，导致 se 变量重置，content 元素也恢复到初始状态，使得动态效果失效。

解决方案：阻止事件的默认行为

要解决这个问题，我们需要阻止按钮点击事件触发的表单默认提交行为。JavaScript提供了 Event 对象的 preventDefault() 方法，它可以在事件处理函数内部调用，以阻止事件的默认操作。

修改后的JavaScript代码如下：

const search_btn = document.querySelector(".search_btn");
const content = document.querySelector(".content");

search_btn.addEventListener("click", search);

let se = false; // 用于追踪内容显示/隐藏状态的变量

function search(event) { // 接收事件对象作为参数
    // 阻止事件的默认行为，即阻止表单提交
    event.preventDefault(); 

    if (!se) {
        content.classList.add("hide");
        se = true;
    } else {
        content.classList.remove("hide");
        se = false;
    }
}

在 search 函数中添加 event.preventDefault() 后，当 search_btn 被点击时，表单的提交行为将被阻止，页面不会重载。这样，JavaScript就能顺利地执行 content 元素的类操作，实现动态的显示/隐藏效果，并且 se 变量的状态也能被正确维护。

注意事项与最佳实践

1. 理解 event.preventDefault() 的适用场景：

   • 阻止表单提交。
   • 阻止链接的默认跳转（例如，点击 标签时不跳转，而是执行JavaScript逻辑）。
   • 阻止右键菜单的弹出（contextmenu 事件）。
   • 阻止拖拽的默认行为（dragover 事件）。
   • 总之，当你不希望浏览器执行某个事件的默认操作，而希望完全由JavaScript控制时，preventDefault() 是一个非常有用的工具。

2. 按钮类型（type 属性）：

   • 如果按钮位于 元素内部，并且你不希望它提交表单，建议将按钮的 type 属性明确设置为 type="button"。
   • 例如：