欢迎各位兄弟 发布技术文章

这里的技术是共享的

You are here

JS 事件的默认行为有哪些 阻止默认行为 有大用

JS事件的默认行为有哪些

 我来答  举报浏览 2454 次
西安天融信教育 
2018-01-30
很多的网页元素都会有默认的行为,比如说当你点击一下超链接a标签的时候,它会有一个跳转的行为;当你在网页上点鼠标右键时会出现一个右键菜;当你在一个form表单里点击提交按钮时网页会产生提交行为并刷新网页,当你网页上滚动鼠标滚轮时,网页的滚动条会动等等。这些都叫事件的默认行为,如果想把这默认行为取消了,相应的JS代码如下:
a.onclick=function(){return false;}//在方法里加个return false,就阻止超链接点击时的跳转行为了
document.oncontextmenu=function(){
/* 在这里你还可以加一些代码,实现自定义的右键菜单 */
return false;//系统自带的右键菜单就失效了
}
Form.onsubmit=function(){return false;}//这样表单就不会产生提交行为了
document.onmousewheel=function(){return false}//IE和chrome的方式,取消鼠标的滚轮的默认行为,网页的滚动条就不会动了
document.addEventListener('DOMMouseScroll',function(e){e.preventDefault=true});//功能同上,火狐的方式。火狐只能用DOM二级的绑定方式,并且用e.preventDefault=true

我们要知道常见的事件默认行为有那些,并且要知道阻止默认行为,只要在绑定到这个行为事件的方法里最后加一句:return false;就可以了。
但要强调注意的是:如果你的事件绑定是用addEventListener来实现的,那阻止默认行为必须用e.preventDefault=true。

来自  https://zhidao.baidu.com/question/1308375512536627939.html



JS——事件详情(默认行为、阻止默认行为的用法:return false等)

默认行为

1》默认行为

  解释——也称作:默认事件。即不需要自己编写代码,浏览器自身所具备的一些功能

例如下图片所示:

在浏览器中单击右键,出现浏览器默认的菜单栏选项(这是最简单的默认行为)

 

2》阻止默认行为

案例1:屏蔽右键菜单(即消除上图所示的“浏览器右键出现菜单栏”事件)

代码如下所示:

注:oncontextmenu 事件:在元素中用户右击鼠标时触发并打开上下文菜单。并用return false(普通写法)来阻止默认行为【关于阻止默认行为,这篇文章可以好好阅读:http://caibaojian.com/javascript-stoppropagation-preventdefault.html#comments (经测试文章中的方法也可以实现阻止默认行为

 

1 <script>
2         document.oncontextmenu=function(){      //浏览器自带右键菜单栏事件
3             return false;                       //阻止“浏览器自带右键菜单栏”事件发生
4         }
5 </script>

 

案例2:弹出自定义右键菜单栏(即模仿“浏览器右键出现菜单栏”事件)

演示效果如下:

 

代码如下所示:

复制代码
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4 <meta charset="UTF-8">
 5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7 <title>Document</title>
 8 <style>
 9   ul{
10   position: absolute;
11   float: left;
12   list-style: none;
13   background: #ccc;
14   width: 100px;
15   padding: 0;
16   margin: 0;
17   text-align: center;
18   top: 0;
19   left: 0;
20   display: none;
21   }
22 </style>
23 </head>
24 <body>
25   <script>
26       window.onload=function(){
27           var oUl=document.getElementById('ul');
28           var scrollTop=document.documentElement.scrollTop || document.body.scrollTop;
29           var scrollLeft=document.documentElement.scrollLeft || document.body.scrollLeft;
30             
31           document.oncontextmenu=function(e){
32               oUl.style.display='block';                      //把隐藏的ul元素显示出来
33 
34               oUl.style.left=e.clientX+scrollLeft+'px';       //跟随鼠标位置移动而显示
35               oUl.style.top=e.clientY+scrollTop+'px';
36 
37               return false;                                   //阻止浏览器自带右键菜单事件
38           }
39             
40           document.onclick=function(){                        //实现任意点击隐藏ul元素
41               oUl.style.display='none';
42           }
43       }
44   </script>
45 </body>
46 <ul id="ul">
47     <li>登录</li>
48     <li>注册</li>
49     <li>我的</li>
50     <li>vip</li>
51 </ul>
52 </html>
复制代码

代码思路说明:

第32行代码:把隐藏的ul元素显示出来;

第37行代码:阻止浏览器自带右键菜单事件;(用到return false方法)

第40行代码:实现任意点击隐藏ul元素;

第28-29行代码:声明‘’滚动条“变量(scrollTop、scrollLeft);

第34-35行代码:用到‘事件(event)方法’,让ul跟随鼠标位置移动而显示;(前面文章有讲解过:https://www.cnblogs.com/ytraister/p/10959867.html

 


来自  https://www.cnblogs.com/ytraister/p/10976467.html




普通分类: