js 右击

下面是做的鼠标右击，不再执行默认事件，而是出来自定义的。

    <div class="wrap" id="wrap">
        <ul class="menu" id="menu">
            <li><a href="javascript:;">这是第一行</a></li>
            <li><a href="javascript:;">这是第一行</a></li>
            <li class="dialog"><a href="javascript:;">这是第一行</a></li>
            <li><a href="http://www.cnblogs.com/chuyu" target="_blank">这是一个链接</a></li>
            <li><a href="javascript:;">这是第一行</a></li>
            <li><a href="javascript:;">这是第一行</a></li>
            <li><a href="javascript:;">这是第一行</a></li>
        </ul>
    </div>

var _wrap = document.getElementById("wrap"),
            _menu = document.getElementById("menu"),
            speed = 0,
            t,
            _wrapHeight;

        
        _wrap.style.display = "none";

        //绑定事件
        var addEvent = function(ele,type,handler){
            if(ele.addEventListener){
                ele.addEventListener(type,handler,false);
            }else if(ele.attachEvent){
                ele.attachEvent("on" + type,handler);
            }else{
                ele["on"+type] = handler;
            }
        };

        //取消默认事件
        var cancelDefault = function(event){
            if(event.preventDefault){
                event.preventDefault();
            }else{
                event.returnValue = false;
            }
        };

        //阻止冒泡事件
        var stopBubble = function(event) {
            if(event.stopPropagation){
                event.stopPropagation();
            }else{
                event.cancelBubble = true;
            }
        }

        //获取鼠标右击时候的位置
        var getPos= function(event){
            if(event.pageX || event.pageY){
                return {
                    x : event.pageX,
                    y : event.pageY
                }
            }
            return{
                x : event.clientX + document.body.scrollLeft,
                y : event.clientY + document.body.scrollTop
            }
        };

        //根据className 获取元素
        var getByClass = function(classname){
            var liNodes = [];
            if(document.getElementsByClassName){
                return document.getElementsByClassName(classname);
            }else{
                var nodes = document.getElementsByTagName("*");//取得所有的节点
                    
                for(var i=0,_len=nodes.length;i<_len;i++){
                    if(hasClass(nodes[i],classname)){
                        liNodes.push(nodes[i]);
                    }
                }
                
            }
            return liNodes;
        };
        var hasClass = function(node,classname){
            var names = node.className.split(/\s+/);//得到classname
            for(var i = 0; i < names.length; i++) {
                if(names[i] === classname) {
                    return true;
                }
            }
            return false;
        };


        function doWrap(ev){
            var oEvent=window.event||ev;
            _wrap.style.display="block";
            t = setInterval(doMove,50);
        }
        function doMove(){
            if(_wrap.offsetHeight>=204){
                speed *= -0.7;
                _wrap.style.height = 204 + "px";
            }
            _wrapHeight = speed + _wrap.offsetHeight;
            
            speed += 10;
            _wrap.style.height = _wrapHeight + "px";
        }

        addEvent(_menu,"mouseover",function(event){
            var event = event || window.event;
            var _target = event.target || event.srcElement;
            _target.style.background = "#00c0ff";
        });
        addEvent(_menu,"mouseout",function(event){
            var event = event || window.event;
            var _target = event.target || event.srcElement;
            _target.style.background = "none";
        });

        //右击阻止默认菜单，显示我的菜单
        document.oncontextmenu = function(event){
            event = event || window.event;
            cancelDefault(event);
            _wrap.style.height = "0";

            var _left = getPos(event).x,
                _top = getPos(event).y;
            _wrap.style.display = "block";
            _wrap.style.left = _left + "px";
            _wrap.style.top = _top + "px";

            clearInterval(t);
            doWrap();
        }; 

        //点击body的时候消失
        document.onclick = function(e){
            _wrap.style.height = "0px";
            _wrap.style.display = "none";
            speed = 0;
            clearInterval(t);
        };

        //点击div 时 不消失，执行应当执行的
        addEvent(_wrap,"click",function(event){
            event = event || window.event;
            stopBubble(event);
        });

        var oLi = getByClass("dialog")[0];
        oLi.onclick = function(event){
            _wrap.style.display = "none";
            alert("我通过ＣｌａｓｓＮａｍｅ弹出了一个层！");
        };

 

 

1.绑定事件：addEvent

2.取消默认事件：cancelDefault

　　之前IE6 里面调试，用抓包工具，出现一个 passerror ，是因为 <a href="javascript:;"></a> a 标签的伪事件，在IE6下
面的bug， 写上 event.preventDefault() 就好了。

3.阻止冒泡：stopPropagation 。这里注意父元素应当跟子元素绑定的是同一事件类型， 我原先 一个是onclick ，一个写的
onmousedown 这样是不可行的

4.得到元素相对于页面的位置。getPos。(pageX,pageY 是现代浏览器相对于页面document 的距离，而IE中 chlientX ,clientY
是元素相对于窗口的距离)

5.根据class 获取元素：getByClass (IE9后面才有document.getElementsByClassName)

6.这里改变背景色，使用事件委托技术处理。

7.缓冲效果，用setInterval() 函数，注意clearInterval().

8.document.oncontextmenu,W3S 上面说是上下文改变，其实很多情况下就可以理解为鼠标右击。

 

另记录下：

//getAttribute在IE6,7下面路径是绝对地址，在现代浏览器中是相对路径
        var a = [1,2,3,4];
        a.unshift(67);
        var aLink = document.getElementById("attri");
        console.log(aLink.getAttribute("href",2));

aLink.getAttribute("href",2) 加上一个参数2 之后，就变成相对地址了。

//在IE9，10里面能够执行，说明IE9/10都支持addEventListener 和 DOMContentLoaded
        if(document.addEventListener){
              document.addEventListener("DOMContentLoaded",function() {
                //alert('DOMContentLoaded is execute')
            }, false);
        }

首先声明了a = 4,但是接着执行函数outerFun() 之后覆盖了全局变量 a 的值变成：0.

function outerFun(){
            //没有var 
            a =0;
            console.log(a); 
        }
        var a = 4;
        outerFun();   
        console.log(a);