码迷,mamicode.com
首页 > 其他好文 > 详细

bind绑定事件,摁回车键提交查询,点击查询也可以提交查询

时间:2015-06-02 00:04:57      阅读:101      评论:0      收藏:0      [点我收藏+]

标签:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.10.2.js"></script>
</head>
<body id="b">
<form action="">
    <table>
        <tr>
            <td><input type="button" name="" value="查询" id="search" onclick="p.search()"/> </td>
        </tr>
    </table>
</form>
<br/>
<span id="aa" style="color: red"></span>
<span id="bb" style="color: blue"></span>
</body>
<script type="text/javascript">
$("#b").bind({
        keydown:function(event){
            if(event.keyCode==13)
            $("#search").removeAttr("onclick");
            p.keySearch();
        },
        keyup:function(event){
            if(event.keyCode==13)
            $("#search").attr("onclick","p.search()")
        }
    });

var p = {
    search:function(){
        $("#aa").append("aa");
    },
    keySearch:function(){
        $("#bb").append("bb");
    }
}

</script>
</html>

本例中使用bind方法绑定了keydown和keyup事件,需要在摁回车的时候去掉onlick,否则,如果在body使用onkeypress或者onkeydown或者onkeyup,则会出现下面这种情况,刷新页面,摁回车键,会执行bb,此时如果点击查询按钮,则会输出aa,然后在摁回车键,就出问题了,会先输出aa,然后输出bb,连续这样。这种情况肯定是不符合要求的,所以需要在键盘摁下的时候去除onclick,这样就不会去调用onclick方法,确保只会输出bb,在键盘起来的时候再添加onclick事件,这样点击按钮依然会触发函数输出aa,提前也需要先有onclick属性以及所调用的方法,应为刚进入页面的时候用户可能会点击查询,然后累了才会懒省事去摁回车,我们公司的测试就是这么干的,然后提出了这样的一个需求,这个小东西还真没少用工夫,好几个小时,但是还有个问题,就是IE不支持,我装了三个浏览器,一个是IE,一个火狐,一个是chrome,火狐和chrome是没有问题的,IE不行,我装的IE11,至少IE11是行不通的,这个真是无比的蛋疼

bind绑定事件,摁回车键提交查询,点击查询也可以提交查询

标签:

原文地址:http://www.cnblogs.com/qq931399960/p/4545139.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!