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. Java实现冒泡排序、折半查找

    1.冒泡排序 public class BubbleSort{ public static void main(String[] args){ int score[] = {67, 69, 75, 8 ...

  2. Flash网页mp3播放器代码(3例)

    第一款:可以添加多首歌 代码如下:可以添加多首歌曲中间用 |  间隔符号隔开 <EMBED  height=20 type=application/x-shockwave-flash plugi ...

  3. 【python】判断值是否在list和set的对比以及set的实现原理

    判断值是否在set集合中的速度明显要比list快的多, 因为查找set用到了hash,时间在O(1)级别. 假设listA有100w个元素,setA=set(listA)即setA为listA转换之后 ...

  4. 玩转X-CTR100 l STM32F4 l ESP8266串口WIFI模块

    我造轮子,你造车,创客一起造起来!更多塔克创新资讯[塔克社区 www.xtark.cn ][塔克博客 www.cnblogs.com/xtark/ ]- ESP8266是一款非常火的WIFI模块,性价 ...

  5. windows下清除svn密码

    刚进公司的时候没有SVN账号,暂用别人的账号很平常,为了更好的代码管理,后面肯定用自己的账号. 那么怎么清除呢. 进入 C:\Documents and Settings\Administrator\ ...

  6. koa 核心源码介绍

    链接来源 Request,Context,Response  在代码运行之前就已经存在的 Request和Response自身的方法会委托到Context中. Context源码片段 var dele ...

  7. C#读取Access数据表中某一列内容，保存至数组

    string strConn = @"Provider=Microsoft.Jet.OLEDB.4.0;Data Source=product.mdb";OleDbConnecti ...

  8. c++ json 详解

    一. 使用jsoncpp解析json Jsoncpp是个跨平台的开源库,首先从http://jsoncpp.sourceforge.net/上下载jsoncpp库源码,我下载的是v0.5.0,压缩包大 ...

  9. MySQL主从数据库配置

    使用工具 MySQL数据版本:5.6.36-log. 两台云服务器(Linux系统) 首先,需要在Linux系统下安装MySQL,具体步骤可以参考这里,并且确保两台主机可以相互访问,可以直接ping一 ...

  10. NSObject之一

    Objective-C中有两个NSObject,一个是NSObject类,另一个是NSObject协议.而其中NSObject类采用了NSObject协议.在本文中,我们主要整理一下NSObject类 ...