目的:点击按钮,点击后在网页上显示点击次数,双击清零
实现: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