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. mysql 到postgresql

    1 import pandas as pd 2 import psycopg2 3 from io import StringIO 4 import pymysql 5 conf={"mys ...

  2. jquery ajax 语法

    $("select[name=type_id]").change(function(e) {    var val=$(this).val();    $.ajax({       ...

  3. 详解iOS应用程序内使用IAP/StoreKit付费、沙盒（SandBox）测试、创建测试账号流程

    Himi  原创, 欢迎转载,转载请在明显处注明! 谢谢. 原文地址:http://blog.csdn.net/xiaominghimi/article/details/6937097 //——201 ...

  4. 利用git向github中推送文件

    /*游戏或者运动才能让我短暂的忘记心痛,现如今感觉学习比游戏和运动还重要——曾少锋*/ 如果对git不够熟悉的学者,可以参考:http://www.cnblogs.com/zengsf/p/75062 ...

  5. 30秒让让你的电脑快一倍 - 计算机基础 - 中国红客联盟 - Powered

    一.清理垃圾 在Windows在安装和使用过程中都会产生相当多的垃圾文件,包括临时文件(如:*.tmp.*._mp)日志文件(*.log).临时帮助文件(*.gid).磁盘检查文件(*.chk).临时 ...

  6. Android Studio安装、配置教程全 - 安卓开发环境的配置手册

    Android Studio的安装.配置 本文提供全流程,中文翻译.Chinar坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 -- 高分辨率用户请根据需求调整网页缩放比例) 一 Downloa ...

  7. Unity3D 发布APK安卓环境配置步骤、安装、教程（含Java/Android）(超全流程)

    Unity3D安卓环境配置运行 本文提供全流程,中文翻译.Chinar坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 -- 高分辨率用户请根据需求调整网页缩放比例) Chinar -- 心分享. ...

  8. Unity 3D游戏-NPC对话系统With XML

    用XML做的Unity NPC对话系统 本文提供全流程,中文翻译.Chinar坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 -- 高分辨率用户请根据需求调整网页缩放比例) 1 Create X ...

  9. python--selenium实用的自动生成测试HTML报告方法--HTMLTestRunner

    python--selenium实用的自动生成测试HTML报告方法--HTMLTestRunner 下面给大家介绍下用HTMLTestRunner模块自动生成测试报告的方法. 一.首先我们导入unit ...

  10. LM算法的推导过程