jquery/js记录点击事件,单击次数加一,双击清零
目的:点击按钮,点击后在网页上显示点击次数,双击清零
实现:js或者jquery
代码如下:
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE HTML>
<html>
<head>
<title>点击事件</title>
<script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
<script type="text/javascript"> window.onload = function() {
var x = 0;
//单击事件
$("#button1").click(function() {
x=x+1;
$("#dianjicishu").html('您已点击:'+x+'次');
});
//双击事件
$("#button1").dblclick(function() {
//alert("双击事件");
x = 0;
$("#dianjicishu").html("");
})
}
</script>
</head> <body>
<p>按钮点击事件:点击后在网页上显示显示点击几次,双击清零</p>
<input type="button" value="点击" id="button1" />
<span id="dianjicishu"></span>
</body>
</html>
补充:
js填充里面html中的内容是innnerHTML(),jquery是html(),形式上有差异
js,与jquery的事件表示形式上有些不同,jquery都没有on,比如js中的onclick,jquery就是click
js事件参考手册:http://www.runoob.com/jsref/dom-obj-event.html
jquery事件参考手册:http://www.w3school.com.cn/jquery/jquery_ref_events.asp
jquery/js记录点击事件,单击次数加一,双击清零的更多相关文章
- js和jquery触发按钮点击事件
js触发按钮点击事件 function load(){ //下面两种方法效果是一样的 document.getElementById("target").onclick(); do ...
- js模拟点击事件实现代码
js模拟点击事件实现代码 类型:转载 时间:2012-11-06 在实际的应用开发中,我们会常常用到JS的模事件,比如说点击事件,举个简单的例子,点击表单外的"提交"按钮来提交表单 ...
- jquery中交替点击事件toggle方法的使用示例
jquery中交替点击事件toggle方法中有两个参数,分别是要交替执行的事件.如果不传参默认是显示隐藏功能,下面有个不错的示例,感兴趣的朋友可以参考下 复制代码代码如下: $('#clickId‘) ...
- JS: javascript 点击事件执行两次js问题 ,解决jquery绑定click事件出现点击一次执行两次问题
javascript 点击事件执行两次js问题 在JQuery中存在unbind()方法,先解绑再添加点击事件,解决方案为: $(".m-layout-setting").unbi ...
- jQuery添加options点击事件并传值
说明: 根据选择不同店铺选项,上送不同id值,展示不同商品列表 var formStr = "{'supplierId':'供应链企业|%-jm-sprt-%|93794498-3'}& ...
- jQuery模拟鼠标点击事件失效的问题
最近使用jQuery操作浏览器获取数据,需要对分页的信息进行处理,发现直接使用$('div#pager a.next').click();的这种写法无法触发点击事件. 使用trigger('click ...
- JS——按钮点击事件累加注册问题
最近在工作上遇到一个点击事件累加的问题,为元素添加点击事件效果,但是总是效果失败,最后发现点击事件被执行了多次,上网查了一下,下边就是解决这个问题的几种思路 案列引自 踮起脚尖眺望6 $(" ...
- selenium自动化之js处理点击事件失效
有时候,元素明明已经找到了,使用click()就是无法触发点击事件(当然,这种情况十分少见,至少我只遇到过一次).下面告诉大家这种场景的解决方案. 使用js代码来点击[博客园]这个按钮 代码: #!/ ...
- vue.js click点击事件获取当前元素对象
Vue.js可以传递$event对象 <body id="app"> <ul> <li v-on:click="say('hello!', ...
随机推荐
- 微信扫码登录(3)---授权码code获取用户基本信息
授权码code获取用户基本信息 上一遍已经获得微信回调的code,网址:回调获取code 那这篇通过code和其它参数去获得用户基本信息. 1.UserServiceImpl关键代码 @Ove ...
- Centos7 防火墙 firewalld 实用操作
一.前言 Centos7以上的发行版都试自带了firewalld防火墙的,firewalld去带了iptables防火墙.其原因是iptables的防火墙策略是交由内核层面的netfilter网络过滤 ...
- 关于ML.NET v0.5的发布说明
适逢.NET Conf 2018举办,ML.NET v0.5也正式宣布发布了.作为面向.NET开发人员的跨平台开源机器学习框架,新的预览版本在不断演变,每次发布除了有新的功能添加,API也会进行调整, ...
- VueJs 源码分析 ---(一) 整体对 vuejs 框架的理解
vue-2.x SourceCode vue 2.x 源码解析 关于vue,以及为何要来写这份源码解析的原因 笔者从最开始接触到 vue 应该还是在 15年 10月份左右,当时听说 前端圈中发生很多的 ...
- Python2中文处理纪要
python2不是以unicode作为基本代码字符类型,碰到乱码的几率是远远高于python3,但即便如此,相信很多人,也不想随意的迁移到python3,这里就总结几个我平常碰到的问题及解法. 文件中 ...
- Spring Boot 项目配置的使用方法
第一种写法resources目录下的application.properties文件 第二种写法resources目录下的application.yml文件 在项目中获取配置项: 分组配置: (配置 ...
- 【Java基础】【04循环语句&方法】
04.01_Java语言基础(循环结构概述和for语句的格式及其使用) A:循环结构的分类 for,while,do...while B:循环结构for语句的格式: for(初始化表达式;条件表达式; ...
- 痞子衡嵌入式:ARM Cortex-M内核那些事(5)- 指令集
大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是ARM Cortex-M指令集. 指令集 指令长度(bits) 包含指令 CortexM0 CortexM0+ CortexM1 Cor ...
- 【.NET Core项目实战-统一认证平台】第九章 授权篇-使用Dapper持久化IdentityServer4
[.NET Core项目实战-统一认证平台]开篇及目录索引 上篇文章介绍了IdentityServer4的源码分析的内容,让我们知道了IdentityServer4的一些运行原理,这篇将介绍如何使用d ...
- .net 发布 web应用程序
第一步:VS2015中发布 https://jingyan.baidu.com/article/7f41ecec58f7eb593c095c69.html (作用:分离开发代码和测试代码) 第二步:发 ...