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. MFC界面美化

    http://www.360doc.com/content/11/0222/15/5404234_95120736.shtml http://www.360doc.com/content/11/010 ...

  2. 驱动程序多线程 PsCreateSystemThread

    内核函数PsCreateSystemThread负责创建新线程.该函数可以创建两种线程,一种是用户线程,它属于当前进程中的线程.另一种是系统线程,系统线程不属于当前用户进程,而是属于系统进程,一般PI ...

  3. DevExpress v17.2新版亮点—WinForms篇（一）

    用户界面套包DevExpress v17.2终于正式发布,本站将以连载的形式为大家介绍各版本新增内容.开篇介绍了DevExpress WinForms v17.2 Data Grid Control ...

  4. 2018-北航-面向对象第三次OO作业分析与小结

    1. 规格设计的发展历史 规格设计用于对程序设提供分解,抽象等的手段.在撰写代码规格的时候,需要对组成部件进行抽象. 在1960s,软件设计出现危机,例如Dijkstra提出了goto语句的种种危害, ...

  5. webbench源码学习-->命令行选项解析函数getopt和getopt_long函数

    对于webbench这个网站压力测试工具网上介绍的很多,有深度详解剖析的,对于背景就不在提了, 听说最多可以模拟3万个并发连接去测试网站的负载能力,这里主要是学习了一下它的源码,做点 笔记. 官方介绍 ...

  6. android系列9.LinearLayout 学习2

    <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=&quo ...

  7. Android shell command execute Demo

    package com.android.utils; import java.io.File; import java.io.IOException; import java.io.InputStre ...

  8. CentOS下设置MySQL的root各种密码 总结

    一.更改mysql密码常用的三种方法 大部分情况下,一般用户没有权限更改密码,只有申请了权限或root用户才可以更改密码: 1.方法1:用mysqladmin mysqladmin -u root p ...

  9. PyCharm:ModuleNotFoundError: No module named 'HTMLTestRunner'

    PyCharm找不到HTMLTestRunner,还是之前的原因PyCharm和之前命令行安装使用的不是一套资源,需要重新导入 查看旧HTMLTestRunner的路径 在PyCharm找到同样类似的 ...

  10. SUST OJ 1671: 数字拼图

    1671: 数字拼图 时间限制: 1 Sec  内存限制: 16 MB提交: 34  解决: 19[提交][状态][讨论版] 题目描述 拼图游戏即在任意一个N*N(N>1)的拼图中,会把一张完整 ...