目的：点击按钮，点击后在网页上显示点击次数，双击清零

实现：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记录点击事件，单击次数加一，双击清零的更多相关文章

  1. js和jquery触发按钮点击事件

    js触发按钮点击事件 function load(){ //下面两种方法效果是一样的 document.getElementById("target").onclick(); do ...

  2. js模拟点击事件实现代码

    js模拟点击事件实现代码 类型:转载 时间:2012-11-06 在实际的应用开发中,我们会常常用到JS的模事件,比如说点击事件,举个简单的例子,点击表单外的"提交"按钮来提交表单 ...

  3. jquery中交替点击事件toggle方法的使用示例

    jquery中交替点击事件toggle方法中有两个参数,分别是要交替执行的事件.如果不传参默认是显示隐藏功能,下面有个不错的示例,感兴趣的朋友可以参考下 复制代码代码如下: $('#clickId‘) ...

  4. JS: javascript 点击事件执行两次js问题 ,解决jquery绑定click事件出现点击一次执行两次问题

    javascript 点击事件执行两次js问题 在JQuery中存在unbind()方法,先解绑再添加点击事件,解决方案为: $(".m-layout-setting").unbi ...

  5. jQuery添加options点击事件并传值

    说明: 根据选择不同店铺选项,上送不同id值,展示不同商品列表   var formStr = "{'supplierId':'供应链企业|%-jm-sprt-%|93794498-3'}& ...

  6. jQuery模拟鼠标点击事件失效的问题

    最近使用jQuery操作浏览器获取数据,需要对分页的信息进行处理,发现直接使用$('div#pager a.next').click();的这种写法无法触发点击事件. 使用trigger('click ...

  7. JS——按钮点击事件累加注册问题

    最近在工作上遇到一个点击事件累加的问题,为元素添加点击事件效果,但是总是效果失败,最后发现点击事件被执行了多次,上网查了一下,下边就是解决这个问题的几种思路 案列引自 踮起脚尖眺望6 $(" ...

  8. selenium自动化之js处理点击事件失效

    有时候,元素明明已经找到了,使用click()就是无法触发点击事件(当然,这种情况十分少见,至少我只遇到过一次).下面告诉大家这种场景的解决方案. 使用js代码来点击[博客园]这个按钮 代码: #!/ ...

  9. vue.js click点击事件获取当前元素对象

    Vue.js可以传递$event对象 <body id="app"> <ul> <li v-on:click="say('hello!', ...

随机推荐

  1. Asp.Net MVC路由生成URL过程

    这次谈一谈Asp.Net MVC中所学到的路由生成URL的相关技术,顺便提一提遇到的一些坑,真的是掉坑掉多了,也就习以为常了,大不了从坑里再爬出来.初学者,包括我,都以为,mvc的核心是模型视图控制器 ...

  2. JVM(2)--一文读懂垃圾回收

    与其他语言相比,例如c/c++,我们都知道,java虚拟机对于程序中产生的垃圾,虚拟机是会自动帮我们进行清除管理的,而像c/c++这些语言平台则需要程序员自己手动对内存进行释放.虽然这种自动帮我们回收 ...

  3. 如何发起、防御和测试XSS攻击，我们用DVWA来学习（下）

    上一篇我们了解了XSS攻击的原理,并且利用DVWA尝试了简单的XSS攻击,这一篇我们来实现更复杂的攻击,然后探讨防御机制和测试理念. 前面我们通过脚本注入让网页弹出了用户cookie信息,可以光弹窗是 ...

  4. MHA非root用户搭建测试

    最近一直在瞎搬砖,最大的感触是运维工作难做.不过废话不多说,最近被分配了一项比较有意思的task,尝试着非root用户搭建MHA并测试下能否成功漂移,以下是两天测试和文档编写的成果,分享给各位看客,欢 ...

  5. spring cloud 配置zuul实用

    在线演示 演示地址:http://139.196.87.48:9002/kitty 用户名:admin 密码:admin 技术背景 前面我们通过Ribbon或Feign实现了微服务之间的调用和负载均衡 ...

  6. 基于React-Native0.55.4的语音识别项目全栈方案

    移动端的API能力验证方案与PC端不一样!不一样!!不一样!!! 即使需要使用的API都存在,也不一定能用,这一点和PC端是有很大区别的,国内的手机系统虽然都是基于Android,但几乎都会经过各大厂 ...

  7. express中间件系统的基本实现

    一直觉得express的中间件系统这种流式处理非常形象,就好像加工流水线一样,每个环节都在针对同一个产品的不同部分完成自己的工作,最后得到一个成品.今天就来实现一个简易的[中间件队列]. 一. API ...

  8. markdown文本转换word，pdf

    pandoc及下载和安装 pandoc是什么 pandoc是一个软件,是一个能把千奇百怪的文档格式互相转换的神器,是一把文档转换的瑞士军刀(swiss-army knife).不多说,放一张其官网(h ...

  9. Java开发笔记（四十四）本地日期时间与字符串的互相转换

    之前介绍Calendar的时候,提到日历实例无法直接输出格式化后的时间字符串,必须先把Calendar类型转换成Date类型,再通过格式化工具SimpleDateFormat获得字符串.而日期时间的格 ...

  10. Java开发笔记（五十）几种开放性修饰符

    前面介绍子类继承父类的时候,提到了public(公共)和private(私有)两个修饰符,其中public表示它所修饰的实体是允许外部访问的:而private表示它所修饰的实体不允许外部访问,只能在当 ...