回车监听事件执行多次

NateHuang

发布于 2018-03-14 11:11:00

2K0

发布于 2018-03-14 11:11:00

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

$("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;
   }				
});

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

return