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. LeetCode OJ：Valid Number

    Validate if a given string is numeric. Some examples:"0" => true" 0.1 " => ...

  2. Javascript的堆和栈的简单理解

    <!doctype html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. webpack-dev-server将文件产出到指定目录

    默认情况下webpack-dev-server是将文件产出到内存中,写了一个插件 将文件产出到指定目录, 比较简易啊 哈哈哈 使用代码如下 const WebpackDevServerOutput = ...

  4. DIY微型操作系统（1）—— 开发的准备

    这个连载是根据<30天自制操作系统>这本书所写 只是类似于补充之类的东西,要详细的讲解,还请参照书上的内容 所以,首先我们要感谢作者川合秀实先生!(鞠躬) 为什么我想写这么一个补充的? 因 ...

  5. 微信小程序代码片段

    微信小程序代码片段是一种可分享的小项目,可用于分享小程序和小游戏的开发经验.展示组件和 API 的使用.复现开发问题等等.分享代码片段会得到一个链接,所有拥有此分享链接的人可以在工具中导入此代码片段. ...

  6. linux下源码安装jdk1.8和tomcat8.5

    Java是目前可移植性较高的语言,相当火热,tomcat运行就需要Java语言环境 0.java简介 1)tomcat运行需要对应的Java环境,Java环境通过安装jdk来获得2)为了防止兼容性问题 ...

  7. stm32 内部温度传感器的配置

    STM32的内部温度传感器和ADCx—IN16输入通道相连接.且温度传感器推荐采样时间为17.1us,支持的温度范围为:-40~125度,精度比较差,± 5℃左右. 计算温度值:T(℃) ={(V25 ...

  8. HihoCoder - 1867: GCD (莫比乌斯容斥)

    Sample Input 6 1 6 2 5 3 4 Sample Output 10 You are given a {1, 2, ..., n}-permutation a[1], a[2], . ...

  9. MVC中未能加载程序集System.Web.Http/System.Web.Http.WebHost

    ==================================== 需要检查项目的Microsoft.AspNet.WebApi版本是否最新,System.Web.Http 这个命名空间需要更新 ...

  10. Word所有字体按比例缩小

    ctrl + [ 不然每次都要一部分一部分的修改啊