基于mootools的三击事件 theclick
最近，网站文章的代码高亮工具不准备再用syntaxhighlighter了，感觉有点拖慢速度，所以直接就用per标签上了，加上class，通过vim生成，效果也是相当不错，渲染速度肯定比syntaxhighlighter要快上不少，但是马上新的问题又出现了，就是复制代码还要手工选中。最终想出来一个折中的方法，那就是三击选中代码。在这里先做一个三击的功能，选择的等等再加。
因为网站是用的mootools做的，这里也用mootools实现。方法是在Element.Events上面再加一个属性theclick。在代码里面就可以像其他事件一样为元素注册事件了。以下是实现代码：
Element.Events.theclick={ base:'click', condition:function(event){ if(event.rightClick) return;//如果是右键，返回 var that=this; //如果没有计数器，初始化 if(!that.clicki){ that.clicki=0; } //计数器累加 that.clicki++; //指定时间不能完成，清空计数器 if(!that.timeout){ that.timeout=setTimeout(function(){ that.clicki=0; delete that.timeout; },700); } //计数器累加到3，返回true return that.clicki==3; }};然后在调用页面调用，这里为一个div和document分别添加了三击事件。（要记得引用mootools框架文件）
<!DOCTYPE HTML><html><head> <meta charset="UTF-8"> <title>three click test</title> <script type="text/javascript" src="js/mootools-core-1.4.5-full-nocompat.js"></script> <script type="text/javascript" src="js/theclick.js"></script> <style type="text/css"> #test{ height:100px; width:200px; border:1px solid silver; } </style> <script type="text/javascript"> document.addEvent("domready",function(event){ $("test").addEvent("theclick",function(e){ alert("检测到三击事件！"); e.stop(); }); document.addEvent("theclick",function(){ alert("document三击事件！"); }); }); </script></head><body> <div id="test">click here!</div></body></html>本文的demo：点击查看
源文件下载：因为防盗链问题，需要者请去http://www.tianyirenjian.com/article.php?aid=23下载
正常的排版，一放到博客园，就得乱。。无语
TAG:
