mootools 기반 삼격 이벤트 theclick

3405 단어 mootools
최근 사이트 글의 코드 하이라이트 도구는 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다운로드

정상적인 조판은 블로그에 올리기만 하면 혼란스러워진다.어이가 없다

좋은 웹페이지 즐겨찾기