flex中event.preventDefault()方法取消事件的默认行为

当一个事件被触发时，在事件的传导过程中，事件会按照默认规则来进行处理，如链接默认跳转，表单默认提交等。如果我们想要取消这些默认行为，可以使用event.preventDefault()方法。

一、什么是flex？

在介绍event.preventDefault()方法取消事件默认行为之前，我们先来简单介绍一下flex布局。

flex布局可以让容器内的子元素以一定规则排列，更加灵活方便的解决页面布局的问题。通过对父容器的设置，实现对子元素的控制和位移。Flex布局规定必须在容器上设置display:flex或display:inline-flex属性，就可以使其成为一个Flex容器，而子元素成为其中的Flex项目。

二、 event.preventDefault() 方法的定义和应用场景

event.preventDefault()方法是阻止元素发生默认的行为。比如：a标签默认会跳转，form表单默认会提交。

下面是一个a标签跳转的示例：

<a href="http://www.baidu.com" class="link">百度一下</a>

上面的代码是一个点击跳转到百度的链接，当我们点击这个链接时，浏览器会自动跳转到href指定的链接地址。如果我们想要将这个链接改为在当前页面打开，或者改为什么都不做。就需要使用event.preventDefault()方法，在点击链接时，取消默认跳转的行为。

下面给出示例代码：

<a href="http://www.baidu.com" class="link" id="baidu">百度一下</a>

<script>
const baiduLink = document.querySelector('#baidu');
baiduLink.addEventListener('click', function(event){
    event.preventDefault();
    console.log('点击了百度链接，但是链接并没有跳转');
})
</script>

上面的代码通过选中标签的id属性，添加一个click事件。然后在事件的监听函数中添加event.preventDefault()方法，当点击这个链接时，不会跳转到href链接所指定的网址，同时也在console中打印了一个内容。

实际上，我们可以根据应用场景在不同元素上使用event.preventDefault()方法进行取消默认行为，比如在表单提交时，我们希望在提交前进行一些非常规的处理，那么可以使用event.preventDefault()方法，在表单提交时，当取消默认提交行为后，再进行我们所需要的数据处理即可。

三、取消form表单的默认提交行为：

下面是一个简单的表单提交示例：

<form>
    <input type="text" name="username" placeholder="请输入用户名">
    <input type="password" name="password" placeholder="请输入密码">
    <button type="submit">登录</button>
</form>

上面的表单有两个输入框和一个登录按钮，我们按照惯例理解，当输入用户名和密码后，点击登录按钮会向服务器发送一次请求来验证身份，如果验证成功则跳转路由。

现在，我们可以在表单提交时通过event.preventDefault()方法取消默认的表单提交行为，然后进行自定义的处理。下面给出代码示例：

<form id="myform">
    <input type="text" name="username" placeholder="请输入用户名">
    <input type="password" name="password" placeholder="请输入密码">
    <button type="submit" id="mybutton">登录</button>
</form>

<script>
const myForm = document.querySelector('#myform');
const myButton = document.querySelector('#mybutton');

myForm.addEventListener('submit', function(event){
    event.preventDefault();
    console.log('点击了表单按钮，但是表单并没有提交');
    // 在这里进行表单数据处理，或者发送ajax请求进行异步提交
})
</script>

上面的代码中，我们在表单元素上添加了id属性，然后通过选中id属性来获取到表单元素和提交按钮元素。接着在表单元素上添加了submit事件的监听函数，在监听函数中调用event.preventDefault()方法来取消默认表单提交行为。

当我们点击表单按钮时，可以看到浏览器并没有向服务器发送任何请求，也没有刷新页面，而是在console中输出了一条信息。

四、总结

以上就是关于flex中event.preventDefault()方法的详细讲解和应用示例，希望对大家有所帮助。需要注意的是，在进行取消默认行为的时候，我们需要确保不会影响到其他的业务逻辑和用户体验，否则会带来问题。