1.自定义右键菜单：

 <!DOCTYPE HTML>

 <html>

 <head>

 <meta charset="utf-8">

 <title>无标题文档</title>

 <style>

 * {margin:0; padding:0; list-style:none;}

 #div1 {position:absolute; width:80px; background:#CCC; border:1px solid black; display:none;}

 </style>

 <script>

 document.oncontextmenu=function (ev)

 {

     var oEvent=ev||event;

     var oDiv=document.getElementById('div1');

     oDiv.style.display='block';

     oDiv.style.left=oEvent.clientX+'px';

     oDiv.style.top=oEvent.clientY+'px';

     return false;

 };

 document.onclick=function ()

 {

     var oDiv=document.getElementById('div1');

     oDiv.style.display='none';

 };

 </script>

 </head>

 <body>

 <div id="div1">

     <ul>

         <li>aaa</li>

         <li>bbb</li>

         <li>ccc</li>

         <li>ddd</li>

     </ul>

 </div>

 </body>

 </html>

2、只能输入数字的文本框：

 <script>

 window.onload=function ()

 {

     var oTxt=document.getElementById('txt1');

     oTxt.onkeydown=function (ev)

     {

         var oEvent=ev||event;

         //alert(oEvent.keyCode);

         //0-    48

         //9-    57

         //如果 用户按的 不是退格 并且 也不是数字

         if(oEvent.keyCode!=8 && (oEvent.keyCode<48 || oEvent.keyCode>57))

         {

             return false;

         }

     };

 };

 </script>

 </head>

 <body>

 <input type="text" id="txt1" />

3、拖拽：

 <style>

 #div1 {width:200px; height:200px; background:red; position:absolute;}

 </style>

 <script>

 window.onload=function ()

 {

     var oDiv=document.getElementById('div1');

     var disX=0;

     var disY=0;

     oDiv.onmousedown=function (ev)

     {

         var oEvent=ev||event;

         disX=oEvent.clientX-oDiv.offsetLeft;

         disY=oEvent.clientY-oDiv.offsetTop;

         document.onmousemove=function (ev)

         {

             var oEvent=ev||event;

             var l=oEvent.clientX-disX;

             var t=oEvent.clientY-disY;

             if(l<0)

             {

                 l=0;

             }

             else if(l>document.documentElement.clientWidth-oDiv.offsetWidth)

             {

                 l=document.documentElement.clientWidth-oDiv.offsetWidth;

             }

             if(t<0)

             {

                 t=0;

             }

             else if(t>document.documentElement.clientHeight-oDiv.offsetHeight)

             {

                 t=document.documentElement.clientHeight-oDiv.offsetHeight;

             }

             oDiv.style.left=l+'px';

             oDiv.style.top=t+'px';

         };

         document.onmouseup=function ()

         {

             document.onmousemove=null;

             document.onmouseup=null;

         };

         return false;

     };

 };

 </script>

 </head>

 <body>

 <div id="div1"></div>

js阻止默认事件、拖拽等等的更多相关文章

  1. JS错误记录 - 事件 - 拖拽

    错误总结: 1. var disX = 0;   现在window.onload里声明变量,而不是在事件oDiv.onmousedown里面声明并赋值. 对于这个还不是很明白. 2. onmoused ...

  2. js阻止默认事件，如a标签跳转和事件冒泡

    禁止a标签点击跳转 <a href="http://baidu.com" onclick="return false">点我啊</a> ...

  3. js阻止默认事件与js阻止事件冒泡

    e.stopPropagation(); //阻止事件冒泡 功能:停止事件冒泡 function stopBubble(e) { // 如果提供了事件对象,则这是一个非IE浏览器 if ( e &am ...

  4. js之阻止事件冒泡(待修改)和阻止默认事件

    阻止默认事件(event.stopPropagation()): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional// ...

  5. 这可能是最简明扼要的 js事件冒泡机制+阻止默认事件 讲解了

    哎 js事件冒泡机制和阻止冒泡 阻止默认行为好像永远也整不清楚,记了忘 忘了记...醉了 这篇文章写完以后下次再忘记 就呼自己一巴掌,忘一次一巴掌 首先要明白两个概念——事件和事件流 事件指的是用户或 ...

  6. JS阻止冒泡事件以及默认事件发生的简单方法

    如果<p>是在<div>里面,那么呢,<P>有一个onclick事件,<div>也有onclick事件,为了触发<P>的点击事件时,不触发父 ...

  7. JS 之 阻止事件冒泡，阻止默认事件，event.stopPropagation()和event.preventDefault()，return false的区别

    在前端开发中,有时我们需要阻止冒泡和阻止默认事件的发生. 一.event.stopPropagation() 阻止事件的冒泡,不让事件向documen上蔓延,但是默认事件任然会执行,当调用这个方法的时 ...

  8. js阻止冒泡事件和默认事件的方法

    阻止默认事件 function stopDeFault(e){ if(e&&e.preventDefault){//非IE e.preventDefault(); }else{//IE ...

  9. js 阻止冒泡事件和默认事件

    阻止事件冒泡 window.enent ? window.enent.cancelBubble = true : e.stopPropagation() function stopBubble(eve ...

随机推荐

  1. System.out.println(i++); System.out.println(++i);的区别

    之前一直对i++和++i很模糊,这次通过两个小demo来探究下. 例1: public static void main(String[] args) { int i=2; System.out.pr ...

  2. Linux内核分析-Linux内核如何装载和启动一个可执行程序

    ID:fuchen1994 实验要求: 理解编译链接的过程和ELF可执行文件格式,详细内容参考本周第一节: 编程使用exec*库函数加载一个可执行文件,动态链接分为可执行程序装载时动态链接和运行时动态 ...

  3. L210 Ebola

    Progress in fighting Democratic Republic of the Congo's Ebola outbreak, the second worst ever, will ...

  4. opencv-python教程学习系列6-用滑动条做调色板

    前言 opencv-python教程学习系列记录学习python-opencv过程的点滴,本文主要介绍opencv-python用滑动条做调色板,坚持学习,共同进步. 系列教程参照OpenCV-Pyt ...

  5. delphi批量存入多媒体字段 遇到内存溢出的坑

    最近delphi做一个小工具其中一个需求要把上W张照片存入数据库多媒体字段. 程序转到1,2W的时候即内在溢出了.最多一次转了3W张照片.很简单的一段代码后来仔细检查发现其中的坑. 下面放上代码 wi ...

  6. Ubuntu 速配指南:开启3D桌面特效

     http://www.lupaworld.com/article-205494-1.html 安装compizconfig-settings-manager(以下简称ccsm) 在终端里输入:sud ...

  7. CTF-练习平台-Misc之 隐写2

    二.隐写2 下载文件后解压,发现是一个png图片,依照老套路查看属性,没有发现 用WinHex打开,在图片文件中,修改图片宽度,将箭头处的A改为F,保存后打开图片 发现flag(对于png的文件格式详 ...

  8. TP3.2整合uplodify文件上传

    HTML中:<style>#img_upload-queue{width:120px;float:left;} /*uploadify的上传进度条样式,前面的img_upload是根据上传 ...

  9. 干了2个月java开发最深的体会

    综上为JQuery中ajax的操作,感觉使用多了,和form表单的处理还是非常相似的,只不过实现的功能不一样罢了.学习编程,其实就是学习对数据的流转处理,也即是程序的运行流程,如何从前台获取,传输到服 ...

  10. hasura-graphql 集成 pipelinedb 1.0.0

    pipelinedb 1.0.0 已经是一个标准的pg 扩展了,同时以前的语法也有变动,但是集成进hasura-graphql 更方便了 使用docker-compose 运行 环境准备 docker ...