回车监听事件执行多次

 我原本想监听输入框的焦点事件,在焦点放在输入框上的时候才监听回车事件,代码如下:

$("input").focus(function() {
	$("input").keypress(function(e) {
	    // 回车键事件 
		var key = window.event ? e.keyCode : e.which;
		if (key.toString() == "13"&&check=="0") {
		    $(".loading_left").fadeIn(100);
			var searchText = $(".listTitle").children("input").val();
			searchText = $.trim(searchText);
			if (searchText != "") {
				search(searchText);
			} else {
				$(".search").text("");
				$(".loading_left").fadeOut(300);
				if ($(".search p").length != 0) {
					$(".search p").text("输入不能为空");
				} else {
					$(".search").append("<p>输入不能为空</p>");
				}
			}
			$(this).blur();
		}
	});
});

结果发现如上代码不仅每次焦点停在输入框上面的时候会添加一次回车监听事件,且每次回车都会增加一次回车监听事件。

解决方案就是使用return false加一个参数判断是否已存在监听事件。代码如下:

var check="0";
$("input").focus(function() {
    $("input").keypress(function(e) {
    // 回车键事件 
       var key = window.event ? e.keyCode : e.which;
       if (key.toString() == "13"&&check=="0") {
	   check="1";
       $(".loading_left").fadeIn(100);
	   var searchText = $(".listTitle").children("input").val();
       searchText = $.trim(searchText);
	   if (searchText != "") {
	       search(searchText);
       } else {
	       $(".search").text("");
		   $(".loading_left").fadeOut(300);
		   if ($(".search p").length != 0) {
		       $(".search p").text("输入不能为空");
		   } else {
			   $(".search").append("<p>输入不能为空</p>");
		   }
	   }
	   $(this).blur();
	   return false;
   }				
});

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏各种机器学习基础算法

重复执行fadeOut和fadeIn出现透明的情况

上周在做一些动画效果切换的时候,发现多次点击切换的时候会有透明的问题。一开始一直找不到问题,后来发现是代码重复执行,使用stop();函数可以解决此问题: ob...

3539
来自专栏云端架构

【云端架构】基于html5的本地多图上传并可在线预览

免插件多图上传的代码是通过html5将本地图片上传服务器,并实现上传之前的图片预览。本文只提供前端代码,后台代码自己研究哈。

4148
来自专栏前端布道

前端开发必备之Chrome开发者工具(上篇)

本文介绍的 Chrome 开发者工具基于 Chrome 65版本,如果你的 Chrome 开发者工具没有下文提到的那些内容,请检查下 Chrome 的版本 简介...

36211
来自专栏编程坑太多

「小程序JAVA实战」 小程序远程调试(九)

PS:最后想到了什么老铁,可以查看远端的代码是不是就可以获取到借鉴他的代码了。其实微信早就想到了,不是所有的都可以的。远端调试必须知道他的APPID的,不是说直...

801
来自专栏我和未来有约会

Silverlight控件 - Carrousel

Silverlight控件 - Carrousel 简介: Carrousel是一个布局控件,可对其内部的子控件排出像《旋转木马》一样的效果。 项目地...

3396
来自专栏h5

支付宝小程序弹窗插件开发|仿微信/android/ios弹窗效果

支付宝小程序弹窗交互组件和微信小程序弹窗功能都差不多,对功能有比较多的限制,尤其想要实现丰富一些的弹窗场景就只能自己写组件实现了。

3361
来自专栏知晓程序

一键搞定!小程序调用日历本该如此简单

1894
来自专栏互联网杂技

一些好用的jquery技巧

1、返回顶部按钮 通过使用jQuery中的animate 和scrollTop 方法,不用插件就可以创建一个滚动到顶部的简单动画: // Back to to...

3276
来自专栏前端人人

React第三方组件1(路由管理之Router的使用⑤按需加载-下)

本教程总共6篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1、React第三方组件1(路由管理之Router的使用①...

2866
来自专栏Theo Tsao

Ionic3学习笔记(二)主题化

本文包含: Ionic3 CSS实用属性、自定义颜色、平台样式、覆写Ionic Sass变量、RTL支持

1424

扫码关注云+社区