首页 > 其他分享 >2024-1-19阻止事件

2024-1-19阻止事件

时间:2024-01-19 19:45:40浏览次数:27  
标签:trim 19 2024 阻止 hid 事件 为空 data

目录

阻止事件

为什么要有阻止事件

这里有个情况,但我的输入框内没有输入字符串就被提交的时候,我需要它显示提示文字,但是如果没有阻止事件的参与就有可能无法长久显示

没有添加阻止事件:

例子如下

<!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 不仅阻止默认行为,还会阻止事件冒泡。

标签:trim,19,2024,阻止,hid,事件,为空,data
From: https://www.cnblogs.com/lzyzjb/p/17975458

相关文章

  • string reversal using stack【1月19日学习笔记】
    点击查看代码//stringreversalusingstack#include<iostream>#include<stack>//stackfromstandardtemplatelibrary(STL)usingnamespacestd;voidreverse(char*c,intn){ stack<char>S; for(inti=0;i<n;i++){ S.push(c[i]);//st......
  • 2024.1.19寒假每日总结10
    算法题:2809.使数组和小于等于x的最少时间-力扣(LeetCode)spark广播器场景:本地集合对象和分布式集合对象(RDD)进行关联的时候需要将本地集合对象封装为广播变量可以节省:1.网络IO的次数2.Executor的内存占用 ......
  • Codeforces Round 919 (Div. 2)
    目录写在前面ABCDE写在最后写在前面比赛地址:https://codeforces.com/contest/1920考试周突然发癫想打cf但是觉得肯定打不完所以拿小号打的。手速慢了没上大分呃呃A求出上下界来,再求被限制的数有多少个在区间内即可。///*By:Luckyblock*/#include<bits/stdc++.h>#de......
  • 海亮01/19数论专题
    海亮01/19数论专题个人题单T1P2522题意对于给出的\(n\)个询问,每次求有多少个数对\((x,y)\),满足\(a\lex\leb\),\(c\ley\led\),且\(\gcd(x,y)=k\),\(\gcd(x,y)\)函数为\(x\)和\(y\)的最大公约数。题解先差分下,问题改成计算\(\sum_{i=1}^n\sum_{j=1}^m[\gcd......
  • 宁夏银川一中2023/2024学年高二第一学期期末考史 游记
    没有机会写OI游记,那就写whk游记!Day1上午考语文。高二学牲第一次用新高考卷式。花了十分钟通读一遍卷子,估计要考成答辩了。开始一道一道过。口胡两篇现代文,40min过去,感觉要寄。加速口胡,选择题基本是胡吹六哨。看到默写题脑子RE了,艸,什么勾使啊。果断放弃!直接看语用,感觉幻视......
  • 2024年最新的Python操控微信教程
    自从微信禁止网页版登陆之后,itchat库实现的功能也就都不能用了,那现在Python还能操作微信吗?答案是:可以!在Github上有一个项目叫《WeChatPYAPI》可以使用Python对微信进行操控。简单来说,它是通过逆向PC端微信来实现对微信的操控,使用Python封装后调用更加简单!Github地址:https:/......
  • 1.19每日总结
    Python3解释器Linux/Unix的系统上,一般默认的python版本为2.x,我们可以将python3.x安装在 /usr/local/python3 目录中。安装完成后,我们可以将路径 /usr/local/python3/bin 添加到您的Linux/Unix操作系统的环境变量中,这样您就可以通过shell终端输入下面的命令来启动......
  • Contest3376 - 2024寒假集训-排位赛竞赛(一)
    A:幂位和高精度。用高精度加法或乘法算出\(2^{1000}\),再将各位累加即为答案。#include<bits/stdc++.h>usingnamespacestd;#definecctieios::sync_with_stdio(0);cin.tie(0);cout.tie(0)stringAP_add(stringA,stringB)//高精度加法{intlena=A.size()......
  • 2024.1.19
    9点26解决了一个第三方库require(xxxx)导致的vite4在build时报错Can'tfindvariable:requirehttps://github.com/vite-plugin/vite-plugin-commonjs《代码提取》三种等级,导出提取、函数提取和闭包提取。其中可以导出提取和闭包提取很有趣。其中导出提取解释了react-r......
  • 2024.1.18
    9:50公司《关于React组件组织和拆分。》几个思路,1)提取子组件以拆分视图,2)提取非视图逻辑到hooks,3)提取领域模型以封装逻辑。但也要注意别过度抽象,个人感觉文中的抽象有些过,线性的逻辑更适合阅读。https://martinfowler.com/articles/modularizing-react-apps.html《React中的......