通过一个onclick实现点击时不同的效果

    在进行响应式设计时遇到的一个问题，两次点击一个元素，触发onclick事件，但是想让两次的操作不同，因为还不会使用jQuery，所以使用了另一个解决方法。

<!DOTCYPE html>
    <html>
    <head>
        <style type='text/css'>
            .d1{
                width:100px;
                height:100px;
                background-color:red;
            }
        </style>
    </head>

    <body>
        <div class='d1' id='div' onclick='aclick()'></div>
    </body>
    <script type='text/javascript'>
        var div = document.getElementById('div');
        function aclick (){
            div.style.backgroundColor='blue';
　　　　　　　//第二次点击执行，因为绑定了saclick函数，所以会执行saclick中的内容
            div.onclick = saclick;    
        }

        function saclick (){
            div.style.backgroundColor='yellow';
　　　　　　　//返回第一次执行的函数，实现循环执行
            div.onclick = aclick;    
        }
    </script>
    </html>

主要思路是在一个事件处理函数中再绑定一个事件处理函数，然后两个函数相互调用，这样就能够实现两次点击产生不同的效果，并且第二次点击之后会返回第一次执行的函数，可以实现循环触发。方法不是很好，但是可以解决问题。

posted on 2017-07-10 10:26  观琪不喻  阅读(682)  评论(0)  编辑  收藏  举报

导航