基于mootools的三击事件 theclick

最近,网站文章的代码高亮工具不准备再用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下载

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

你可能感兴趣的:(mootools)