基于mootools的三击事件 theclick

最新推荐文章于 2024-09-11 15:33:18 发布

weixin_30768661

最新推荐文章于 2024-09-11 15:33:18 发布

阅读量131

点赞数

文章标签： javascript php 开发工具 ViewUI

原文链接：http://www.cnblogs.com/tianyi-yyj/archive/2012/10/13/2722419.html

版权

最近，网站文章的代码高亮工具不准备再用syntaxhighlighter了，感觉有点拖慢速度，所以直接就用pre标签上了，加上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下载

正常的排版，一放到博客园，就得乱。。无语

转载于:https://www.cnblogs.com/tianyi-yyj/archive/2012/10/13/2722419.html