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

实现：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. .NET Core实战项目之CMS 第二章 入门篇-快速入门ASP.NET Core看这篇就够了

    作者:依乐祝 原文链接:https://www.cnblogs.com/yilezhu/p/9985451.html 本来这篇只是想简单介绍下ASP.NET Core MVC项目的(毕竟要照顾到很多新 ...

  2. .NET Core玩转机器学习

    最近在搞机器学习,目前国内没有什么关于ML.NET的教程,官方都是一大堆英文,经过了我的努力,找到了Relax Development大哥的博客,有关于ML.NET的内容 原文地址:https://w ...

  3. Vue生命周期详解

    Vue所有的生命周期钩子自动绑定在this上下文到实例中,因此你可以访问数据,对属性和方法进行运算.这意味着你不能使用箭头函数来定义一个生命周期方法.这是因为箭头函数绑定了父上下文,因此this与你期 ...

  4. UE4 打包C++项目到win32平台报错 could not find mspdbcore.dll

    解决方法: 将Visual Studio中相应系统(如32位对应x86.64位对应x64)下的 ms.*.dll 等一系列文件拷贝到 C:\Windows\System32\ 路径下.踩坑:不能只拷贝 ...

  5. .NET代码树执行时间计时器

    有很多时候我们需要对代码不同段计算一个执行时间,并希望通过节点树的方式表达现每段代码的执行时长.在.Net下似乎找不到这样一个功能类,所以花了一些时间实现这样一个代码运行计时器.首先看一下简单的需求. ...

  6. 决策树 Decision Tree

    决策树是一个类似于流程图的树结构:其中,每个内部结点表示在一个属性上的测试,每个分支代表一个属性输出,而每个树叶结点代表类或类分布.树的最顶层是根结点.  决策树的构建 想要构建一个决策树,那么咱们 ...

  7. Chapter 5 Blood Type——30

    That wasn't a challenge; I was always pale, and my recent swoon had left a light sheen of sweat on m ...

  8. 【转载】CentOS 7部署ASP.NET Core应用程序

    看了几篇大牛写的关于Linux部署ASP.NET Core程序的文章,今天来实战演练一下.2017年最后一个工作日,提前预祝大家伙元旦快乐.不扯淡,直接进入正题.您有任何问题请在评论区留言. 1.环境 ...

  9. 【c#】RabbitMQ学习文档（二）Work Queues（工作队列）

        今天开始RabbitMQ教程的第二讲,废话不多说,直接进入话题.   (使用.NET 客户端 进行事例演示)          在第一个教程中,我们编写了一个从命名队列中发送和接收消息的程序. ...

  10. Ruby数组方法整理

    数组方法整理 方法列表: all().any().none()和one():测试数组中的所有或部分元素是否满足给定条件.条件可以是语句块中决定,也可以是参数决定 append():等价于push() ...