目录
阻止事件
为什么要有阻止事件
这里有个情况，但我的输入框内没有输入字符串就被提交的时候，我需要它显示提示文字，但是如果没有阻止事件的参与就有可能无法长久显示
没有添加阻止事件：
例子如下
<!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 不仅阻止默认行为，还会阻止事件冒泡。