`
highfly-s
  • 浏览: 96758 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

禁用上下文菜单事件 自定义显示上下文、事件委托、悬浮显示弹出层

禁用上下文菜单事件 自定义显示上下文、事件委托、悬浮显示弹出层 
阅读更多

<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link rel="stylesheet" type="text/css" href="../csss/basic.css" />
<style type="text/css">
#Testss{ width:120px; background:#CFF; position:absolute; display:none; z-index:99;}
#Testss ul li{ height:28px; line-height:28px; border-bottom:#FFF solid 1px;}
#Testss ul li.on{ background:#F6F}
</style>
<script language="javascript" src="../csss/jquery-1.7.1.min.js"></script>
</head>

<body>
<div id="button" style="width:200px; height:200px; background:#FCF">
<input type="button" value="click me" id="clickMe"  />

</div>
<p>
<input type="text" id="t1" tabindex="1"  value="1" /> <input type="text"  tabindex="3" value="3" />
</p>
<p>
<input id="test" type="text" tabindex="2" value="2"  /> <input type="text" tabindex="4" value="4" />
</p>
<div id="show" style="border:#F00 solid 1px; background-color:#9FF; height:40px; display:none"></div>


<div id="Testss">
<ul>
     <li class="on">aaaaaaa</li>
     <li>bbbbbbb</li>
     <li>ccccccc</li>
     <li>ddddddd</li>
</ul>


</div>
<script language="javascript" type="text/javascript">
/*var input =  document.getElementById('t1');

input.onclick=function(){alert(1)};
input.onclick=function(){alert(2)};
input.select();
input.addEventListener("select",function(){
           alert("dd");
},false);*/
//alert(~"d");
new Function("return" + alert("hello"));
      var obj1={};  
(function(window){


  //alert(window);

  
   obj1.test=function(obj){
       alert(obj);
      
   }

})(this)

//obj1.test(111);
document.body.normalize();
document.getElementById('clickMe').style.cssText
var bod = document.getElementById('button');
bod.onclick=function(event){
    var event = event || window.event;
     if((event.target?event.target.id:event.srcElement.id)=='clickMe'){
         
         alert("hello");
     }
}
document.onc
document.body.onmouseup=function(event){
  var event = event || window.event;
  if(event.button==2){
         document.getElementById('show').style.display="block";
     
   }

}
document.onmousedown=function(event){
  var event = event || window.event;
  if(event.button==2){
     
         document.getElementById('show').style.display="block";
     
   }

}

function stop(){
return false;
}

//上下文菜单禁用
//document.oncontextmenu=stop;
/*document.oncontextmenu=function(event){
var event =  event || window.event;
 try{
     event.preventdefault();     
}
 catch(ex){
     event.returnValue=false;
     }

}*/

var btn = document.getElementById('test');


//组合键shift+@ 时弹出提示
btn.onkeyup=function(event){
    var event  =  event || window.event;
   
    if(event.shiftKey && event.keyCode==50){
        alert("hll");
        }
   
    }
   
   
    //监听键盘的上下键
    $(document).keyup(function(event){
        var event =  event || window.event;
        //alert(event.keyCode);
        if(event.keyCode==40){
           
            $("#Testss ul li.on").next().addClass('on').siblings().removeClass('on');
            //event.target.className='on';
         }else if(event.keyCode==38){
             $("#Testss ul li.on").prev().addClass('on').siblings().removeClass('on');
             }
       
        });
      
   
    var button = document.getElementById('button');
    button.oncontextmenu=function(event){
        var event = event || window.event;
        try{
           
           
            event.preventDeafult();
   
            if(event.target?event.target.tagName:event.srcElement.tageName=="li"){
               
                event.preventDefault();
                }
            }catch(e){
               
                if(event.target?event.target.tagName:event.srcElement.tageName=="li"){
                event.preventDefault();
                }
                event.returnValue=false;
                }
        var div =  document.getElementById('Testss');
       
        div.style.top= event.clientY+"px";
        div.style.left = event.clientX+"px";
        div.style.display="block";
       
    }
    //对右键点击的UL LI  点击弹出层消失
   
   
    document.getElementById('Testss').onclick=function(event){
        var event = event || window.event;
       
        var target = (event.target?event.target.tagName:event.srcElement.tagName).toLowerCase();
       
        if(target=="li"){
       
            document.getElementById('Testss').style.display="none";
        }

    }
   
    button.onmouseout =  function(event){
        var event = event || window.event;
         var target=null;
        if(event.relatedTarget){
            target = event.relatedTarget;
        }else if(event.toElement){
           target = event.toElement;
        }else if(event.fromElement){
            target = event.fromElement;
        }
      if(target){
          console.log(target.tagName+"****");
        if(target.id.toLowerCase()!="button"&&target.id.toLowerCase()!="Testss"&&target.tagName.toLowerCase()!="li" ){
        console.log("22222");
        console.log(target.id!="button");
        console.log(target.tagName);
        document.getElementById('Testss').style.display="none";
        debugger;
        }
      }
    }
    document.getElementById('Testss').onmouseout=  function(event){
      var event = event || window.event;
         var target=null;
        if(event.relatedTarget){
            target = event.relatedTarget;
        }else if(event.toElement){
           target = event.toElement;
        }else if(event.fromElement){
            target = event.fromElement;
        }
       
           //alert(target.id);
          
           if(target){
               console.log(target.id+"-------@@@"+target.tagName);
        if(target.id.toLowerCase()!="button"&&target.id.toLowerCase()!="Testss"&&target.tagName.toLowerCase()!="li"){
            console.log("3333");
            document.getElementById('Testss').style.display="none";
            debugger;
        }   
           }
    }
   
    window.onbeforeonload=function(event){
        var event =  event || window.event;
        alert("eeee");
        event.returnValue="Are you sure close this page!"
    }
   
</script>
</body>
</html>

分享到：
| 用uploadify 仿做微博多个图片上传
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics