`
highfly-s
  • 浏览: 100764 次
  • 性别: 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 仿做微博多个图片上传
评论
发表评论

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

相关推荐

    不需悬浮窗权限桌面弹出View

    在Android开发中，"不需悬浮窗权限桌面弹出View"是一个相对特殊的技术点，它主要涉及到如何在用户的桌面上显示一个悬浮视图，而无需申请通常需要的悬浮窗权限。这种技术通常用于创建轻量级的通知或者快捷操作界面，...

    鼠标事件列表--html中所有事件的列表

    22. onContextMenu：用户右键点击或通过快捷键打开上下文菜单时触发，可用于禁用默认菜单。 23. onCopy、onCut、onPaste：实际执行复制、剪切和粘贴操作后触发。 24. onDrag系列事件：处理拖放操作，如开始、结束、...

    透明窗体透明叠加窗体透明按钮透明输入框

    同时，可以使用 `CreateGraphics` 创建图形上下文并手动绘制文本，确保文字仍然可见。 5. **实践与注意事项** - 使用 `UpdateLayeredWindow` API 可以获得更好的透明效果，允许自定义每个像素的透明度。 - 当窗体...

    js实现鼠标滑动到某个div禁止滚动

    关于如何使用JavaScript实现当鼠标滑动到指定的div区域内时禁止页面滚动的...此外，过度滥用这样的效果可能会降低网站的可用性，因此在决定是否使用此类功能时，需要综合考虑用户交互的上下文和用户体验的总体设计。

    Visual C++ 自绘标题栏

    在OnPaint消息处理函数中，使用CClientDC对象获取设备上下文（Device Context），然后使用GDI（Graphics Device Interface）函数进行绘制。例如，可以使用TextOut函数绘制文本标题，使用FillRect填充背景色，甚至...

    自绘按钮控件的源代码资源

    3. CDC（Device Context）：设备上下文对象，用于管理绘图环境，包括颜色、字体、刷子等，是GDI绘图的核心对象。 二、自绘按钮的实现步骤 1. 创建自定义控件类：通常需要继承标准的按钮控件类，如MFC的CButton，...

    VB多种窗体透明/半透明源码

    1. **禁用鼠标事件**：首先确保窗体不会响应鼠标事件。 2. **设置透明度**：通过`SetLayeredWindowAttributes`函数设置窗体透明度，通常设置为0表示完全透明。 ```vb Public Function MakeOpaque(ByVal hWnd As ...

    LWN helper-crx插件

    这种设计既保留了原有网页的结构，又提供了额外的上下文信息，降低了阅读门槛。 为了安装LWN helper-crx插件，用户通常需要将其下载到本地，然后在支持CRX格式的浏览器（如Google Chrome或基于Chromium的浏览器）的...

    图像合并工具代码 GDI+

    GDI+的核心类是Graphics，它代表了一个绘图表面，可以用于在窗口、设备上下文或者内存位图上进行绘图。Bitmap类则用来表示位图图像，Image类是Bitmap的基类，可以处理各种类型的图像文件，如JPEG、PNG等。Pen类和...

    iOS和Android的app界面设计规范1

    2. **图表尺寸**: 启动图标、操作栏图标、上下文图标和系统通知图标有特定的dp尺寸，例如在720x1280屏幕上，操作栏图标为48×48 dp。最小线条宽度至少为2dp。 3. **屏幕大小和分辨率**: 不同尺寸和分辨率的设备需要...

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