2024-1-19阻止事件
1.11月3日前端需要学习的知识、自闭合标签、meta标签、div标签2.11月6日标题标签、图片标签、链接标签、段落标签3.11月6日列表、标题、表格、基本、块级标签以及特殊符号4.11月7日form表单与input框以及select标签5.11月7日css介绍、基本格式、样式、选择器6.11月8日字体的属性7.11月9月label标签补充8.11月9月字体的属性2以及div模块的另一种用法9.11月9日背景属性10.11月9日边框11.11月9日display属性12.11月10日css盒子模型的margin和padding属性13.11月10日浮动float以及清除浮动clear14.11月10日overflow属性以及圆形头像的制作15.11月10月高度和长度的另外四种情况16.11月10日定位属性17.11月10日模态框和透明18.11月12日基础的网页设计以及阴影的设计box-shadow属性19.11月12日js的基础引入和注释20.11月13日js语言常量与变量21.11月13日js数据类型以及常见的方法22.11月13日布尔值(Boolean)23.11月13数组以及数组常用发法24.11月14日i++以及++i以及逻辑运算符25.11月14日流程控制26.11月14日三元运算27.11月14日函数的定义28.11月15日函数作用域和闭包函数29.11月16日自定义对象类型30.12月27日JSON对象31.12月29日正则对象32.12月29日正则对象33.2024-1-2bom对象34.2024-1-2 DOM概念以及部分用法35.2024-1-4事件36.2024-1-17 jq的简介、基础语法、选择器、部分操作37.2024-1-18文档处理38.2024-1-19事件绑定，input与hover事件
39.2024-1-19阻止事件
40.2024-1-19事件冒泡41.2024-1-22页面加载和事件委托42.2024-1-22动画效果和部分方法阻止事件
为什么要有阻止事件
这里有个情况，但我的输入框内没有输入字符串就被提交的时候，我需要它显示提示文字，但是如果没有阻止事件的参与就有可能无法长久显示
没有添加阻止事件：
例子如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>阻止事件</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<style>
.hid{
display: none;
}
</style>
</head>
<body>
<form action="">
<input type="text" id="id"/><span class="hid">不能为空</span>
<br />
<input type="submit" value="测试" id="sub"/>
</form>
<script>
$("#sub").on("click",function(){
var data = $("#id").val();
if(!data.trim()){
$(".hid").removeClass("hid")
}//这里的!data.trim()是用于判断输入的数据是否为空
})
</script>
</body>
</html>
结果如图
添加阻止事件
例子如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>阻止事件</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<style>
.hid{
display: none;
}
</style>
</head>
<body>
<form action="">
<input type="text" id="id"/><span class="hid">不能为空</span>
<br />
<input type="submit" value="测试" id="sub"/>
</form>
<script>
$("#sub").on("click",function(){
var data = $("#id").val();
if(!data.trim()){
$(".hid").removeClass("hid")
return false//这里进行阻止事件的用法
}//这里的!data.trim()是用于判断输入的数据是否为空
})
</script>
</body>
</html>
结果如图
上面的是通过阻止事件来实现
return false执行了两个操作：
- 阻止事件的默认行为。在这个上下文中，阻止了表单的默认提交行为。
- 阻止事件冒泡。这意味着事件不会继续传递到更高的DOM元素。
其实也可以通过其它的方式
例如preventDefault()类名操作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>阻止事件</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<style>
.hid{
display: none;
}
</style>
</head>
<body>
<form action="">
<input type="text" id="id"/><span class="hid">不能为空</span>
<br />
<input type="submit" value="测试" id="sub"/>
</form>
<script>
$("#sub").on("click",function(e){
var data = $("#id").val();
if(!data.trim()){
$(".hid").removeClass("hid")
e.preventDefault()
// return false
}//这里的!data.trim()是用于判断输入的数据是否为空
})
</script>
</body>
</html>
e.preventDefault()是js中的一个方法，用于阻止事件的默认行为。这里的e代表事件对象，它通常在事件处理函数的参数中传递。
区别点：
与 return false 的区别在于，e.preventDefault() 仅仅阻止事件的默认行为，而不会阻止事件继续在 DOM 树中传播（不会阻止事件冒泡）。而 return false 不仅阻止默认行为，还会阻止事件冒泡。
