JS中的默认行为

简介:

默认行为

默认行为

1什么是默认行为:说白了,就是浏览器自带的功能,比如网页右键自动弹出菜单。在输出框中敲击键盘,自动输出敲击的数值,这些都是默认行为

 

document.oncontextmenu=function  oncontextmenu作用是点击右键,呼叫右键菜单的时候

2怎么阻止默认行为

    <script>

        document.oncontextmenu=function()

        {

           return false;

        }

   </script>.

给这个函数弄一个返回值 false就是拒绝默认行为

 

3把默认行为拒绝掉,但是不拒绝自己设置的菜单

<!DOCTYPE html>

<html>

   <head>

     <meta charset="UTF-8">

     <title></title>

     <style>

        #div1{

           background: red;display:none;position:absolute;width:80px;

          

        }

     </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>aaaa</li>

           <li>aaaa</li>

           <li>aaaa</li>

           <li>aaaa</li>

        </ul>

     </div>

   </body>

</html>

 

 

4只能输入数字的输入框例子

keydown 键盘按下  keyup键盘按下之后又松开

<!DOCTYPE html>

<html>

   <head>

     <meta charset="UTF-8">

     <title></title>

     <script>

        window.onload=function()

        {

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

           oTxt.onkeydown=function(ev)//键盘按键抬起时

           {

          

             var oEvent=ev||event;

                //alert(oEvent.keyCode)           

             if(oEvent.keyCode<48 || oEvent.keyCode>57)

             {

                return false;

             }

            

            

           };

          

        }

       

     </script>

   </head>

   <body>

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

   </body>

</html>

 

 

 

拖拽

拖拽:就是你点击一个框一直点击不松手可以跟着鼠标移动而移动

 

整体代码:

<!DOCTYPE html>

<html>

  <head>

     <meta charset="UTF-8">

     <title></title>

     <style>

       #div1{

         background: red;

         width:100px;

         height:100px;

         position:absolute;

       }

     </style>

     <script>

       window.onload=function()

       {

         var disX=0;

         var disY=0;

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

         document.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;

            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>

  </body>

</html>

但是在火狐浏览器下会有一个bug,你点一次拖拽没问题,第二次拖拽会有一个阴影,这是火狐浏览器的bug,只要关闭默认行为就可以了

return false;

 

但是还有一个小问题,就是有的人会把拖拽框拖到网页以外,然后就找不到了,怎么办呢。用下面代码解决

 

document.onmousemove=function(ev)这个函数改成如下:

 

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'

           

                                   }

 

本文转自 新网学会 51CTO博客,原文链接:http://blog.51cto.com/xwxhvip/1983878 ,如需转载请自行联系原作者

相关文章
|
6月前
|
监控 JavaScript 前端开发
使用Vue.js开发员工上网行为监控的实时数据展示页面
使用Vue.js开发的实时员工上网行为监控页面,展示员工访问的网站、应用和时间等数据。页面响应式设计,适应不同设备。通过Vue组件显示实时数据,如`&lt;li v-for=&quot;activity in activities&quot;&gt;`循环渲染。数据定时更新,利用Vue的生命周期钩子和axios从服务器获取并自动刷新,确保数据的时效性。该页面有助于管理者即时了解员工网络活动,保障企业网络安全和资源管理。
194 5
|
7月前
|
JavaScript
阻止默认行为的两种方式(js的问题)
阻止默认行为的两种方式(js的问题)
37 0
|
7月前
|
JavaScript
Vue.js 修饰符:精准控制组件行为
Vue.js 修饰符:精准控制组件行为
|
6月前
|
JavaScript 前端开发 开发者
JavaScript的变量提升是一种编译阶段的行为,它将`var`声明的变量和函数声明移至作用域顶部。
【6月更文挑战第27天】JavaScript的变量提升是一种编译阶段的行为,它将`var`声明的变量和函数声明移至作用域顶部。变量默认值为`undefined`,函数则整体提升。`let`和`const`不在提升范围内,存在暂时性死区。现代实践推荐明确声明位置以减少误解。
47 2
|
2月前
|
JSON 监控 JavaScript
Logo/JS 在局域网行为管理软件中的探索之路
在数字化时代,局域网行为管理软件对企业至关重要,Logo 和 JavaScript 在其开发中发挥重要作用。Logo 用于绘制网络拓扑图,帮助管理员了解网络结构;JavaScript 实现实时监控网络流量和用户行为分析,提升管理效率和安全性。
32 3
|
5月前
|
监控 JavaScript 安全
局域网行为管理软件与 Angular.js 的协同工作
在数字化办公时代,局域网行为管理软件对保障企业信息安全至关重要。Angular.js 作为强大前端框架,助力这类软件开发与优化。通过 `$http` 服务收集并提交用户行为数据至服务器,实现实时监控与展示。Angular.js 提供的双向数据绑定特性增强了软件交互性与实用性,为企业提供高效可靠的行为管理方案,保障网络安全与正常运营。
32 6
|
6月前
|
自然语言处理 JavaScript 前端开发
在JavaScript中,this关键字的行为可能会因函数的调用方式而异
【6月更文挑战第15天】JavaScript的`this`根据调用方式变化:非严格模式下直接调用时指向全局对象(浏览器为window),严格模式下为undefined。作为对象方法时,`this`指对象本身。用`new`调用构造函数时,`this`指新实例。`call`,`apply`,`bind`可显式设定`this`值。箭头函数和绑定方法有助于管理复杂场景中的`this`行为。
61 3
|
7月前
|
自然语言处理 JavaScript 前端开发
在JavaScript中,this关键字的行为可能会因函数的调用方式而异
【5月更文挑战第9天】JavaScript中的`this`关键字行为取决于函数调用方式。在非严格模式下,直接调用函数时`this`指全局对象,严格模式下为`undefined`。作为对象方法调用时,`this`指向该对象。用`new`调用构造函数时,`this`指向新实例。通过`call`、`apply`、`bind`可手动设置`this`值。在回调和事件处理中,`this`可能不直观,箭头函数和绑定方法可帮助管理`this`的行为。
44 1
|
7月前
|
移动开发 JavaScript 前端开发
javascript监听浏览器离开、进入行为
javascript监听浏览器离开、进入行为
181 0
|
JavaScript 前端开发
解密 JavaScript 中的 this:作用、行为和陷阱
JavaScript的this关键字是JavaScript中比较重要的概念之一,本文主要讲解this的作用、行为以及使用它会遇到的陷阱。
174 1