1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.     </head>
  7.     <body style="height: 2000px;">
  8.         <style type="text/css">
  9.             #div1{width:100px;height:100px;background: red;}
  10.         </style>
  11.         <script type="text/javascript">
  12.             window.onload = function(){
  13.                 var oDiv = document.getElementById('div1');
  14.  
  15.                 /*
  16.                 ie/chrome : onmousewheel
  17.                     event.wheelDelta  //firefox 下没有这个属性
  18.                     上 ： 120
  19.                     下 ：-120
  20.  
  21.                 firefox : DOMMouseScroll  必须用addEventListener
  22.                 addEventListener 必须是标准浏览器才支持 （ie6 7 8 用的是attachEvent）
  23.                     event.detail
  24.                     上：-3
  25.                     下：3                    
  26.  
  27.                 return false 阻止的是 obj.on事件名称=fn 所触发的默认行为
  28.                 addEventListener绑定的事件需要通过event下面的preventDefault();
  29.                 */
  30.                 oDiv.onmousewheel = fn;
  31.                 if(oDiv.addEventListener){
  32.                     oDiv.addEventListener('DOMMouseScroll', fn ,false);
  33.                 }
  34.  
  35.                 function fn(ev){
  36.                     //alert()
  37.                     var ev = ev || event;
  38.                     //alert(ev.wheelDelta);
  39.                     //alert(ev.detail)
  40.  
  41.                     var b = true;
  42.                     if(ev.wheelDelta){
  43.                         b = ev.wheelDelta > 0 ? true : false
  44.                     }else{
  45.                         b = ev.detail <  0 ? true : false
  46.                     }
  47.                     //alert(b)
  48.                     if(b){
  49.                         this.style.height = this.offsetHeight - 10+'px';
  50.                     }else{
  51.                         this.style.height = this.offsetHeight + 10+'px';
  52.                     }
  53.  
  54.                     if(ev.preventDefault){
  55.                         ev.preventDefault();
  56.                     }
  57.                     return false;
  58.                 }
  59.  
  60.             }
  61.         </script>
  62.  
  63.         <script type="text/javascript">
  64.             //return false 阻止的是 obj.on事件名称=fn 所触发的默认行为
  65.             //    addEventListener绑定的事件需要通过event下面的preventDefault();
  66.             //阻止默认行为是根据事件的绑定决定的
  67.  
  68.             //右键行为阻止
  69.             var context1 = function(){
  70.                 document.oncontextmenu = function (){// chrome
  71.                     return false;
  72.                 }
  73.  
  74.             }
  75.             //context1()  //标准浏览器
  76.  
  77.             var context2 = function (){
  78.                 document.addEventListener('contextmenu',function(ev){
  79.                     ev.preventDefault();
  80.                     //return false;
  81.                 })
  82.             }
  83.             //context2()
  84.  
  85.             var context3 = function(){
  86.                 document.attachEvent('contextmenu',function(){
  87.                     return false;
  88.                 })
  89.             }
  90.             context3() //IE非标准
  91.  
  92.         </script>
  93.         <div id="div1"></div>
  94.     </body>
  95. </html>

JS-鼠标滚轮事件 和 阻止默认行为的更多相关文章

  1. js鼠标滚轮事件兼容

    JavaScript鼠标滚轮事件 IE6.0首先实现了鼠标的滚轮事件,其良好的交互效果得到认可,随后Opera.chrome.safari等主流浏览器都实现了该效果,不过存在着很大的兼容问题. 大多数 ...

  2. JS鼠标滚轮事件解析

    一.不同浏览器的鼠标滚轮事件 首先,不同的浏览器有不同的滚轮事件.主要是有两种,onmousewheel(IE/Opera/Chrome支持,firefox不支持)和DOMMouseScroll(只有 ...

  3. js鼠标滚轮事件

    不多说,直接上代码. //非ie document.body.onmousewheel = function(event) { event = event || window.event; conso ...

  4. JS鼠标滚轮事件详解

    鼠标滚轮事件 //兼容性写法,该函数也是网上别人写的,不过找不到出处了,蛮好的,所有我也没有必要修改了 //判断鼠标滚轮滚动方向 if (window.addEventListener)//FF,火狐 ...

  5. JS 鼠标滚轮事件（mousewheel/DOMMouseScroll）

    onmousewheel (FireFox不支持此事件) // IE/Opera/Chrome/Safari document.body.onmousewheel = function(event) ...

  6. js鼠标滚轮事件上滚下滚判断

    onmousewheel <script> var scrollFunc = function (e){ //其实我一开始也不知道用啥 //console.log(e)我们可以打印一下 / ...

  7. js中鼠标滚轮事件详解

    js中鼠标滚轮事件详解   (以下内容部分内容参考了http://adomas.org/javascript-mouse-wheel/ ) 之前js 仿Photoshop鼠标滚轮控制输入框取值中已使用 ...

  8. js整频滚动展示效果（函数节流鼠标滚轮事件）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. js中的鼠标滚轮事件

    ## 事件对象 event 1 event事件对象,表示用来获取事件的详细信息,比如得到鼠标的横坐标:事件对象.clientX(clientX是可视区坐标) window.onclick = func ...

随机推荐

  1. Selenuim+Python之元素定位总结及实例说明

    网页自动化最基本的要求就是要定位到各个元素,然后才能对该元素进行各种操作(输入,点击,清除,提交等),所以笔者今天来总结下Selenuim+Python最基本的几种定位方式及实例说明,希望能帮助到大家 ...

  2. Apriori算法第一篇

    摘要: Apriori算法是产生k项高频项目组的一般手段.算法概要:首先产生k项高频项目集合Lk,自身链接形成k+1项的项目结合C(k+1),然后剪枝(去掉以前去掉的不满足支持度的高频),生成K=1项 ...

  3. 有趣的keil MDK细节（转）

    源:有趣的keil MDK细节 1.MDK中的char类型的取值范围是? 在MDK中,默认情况下,char 类型的数据项是无符号的,所以它的取值范围是0-255.它们可以显式地声明为signed ch ...

  4. jpg转bmp（使用libjpeg）

    源: jpg转bmp(使用libjpeg) [转]JPEG压缩原理 bmp转jpg(使用libjpeg)

  5. 【转】 完美配置Tomcat的HTTPS

    Tomcat配置HTTPS的文章到处都有,过程也比较简单,随后文中会转一段过来. 但对于启用APR情况下报异常“java.lang.Exception: Connector attribute SSL ...

  6. MySQL 表的命令

    1.查看表的结构: desc 表名; show columns from 表名; describe 表名; show create table 表名; 2.修改表名 rename table 原表名 ...

  7. MapReduce 简单的全文搜索

    上一个已经实现了反向索引,那么为什么不尝试下全文搜索呢.例如有了 Hello     file3.txt:1; MapReduce     file3.txt:2;fil1.txt:1;fil2.tx ...

  8. unicode转GBK,GNK转unicode,解决FATFS中文码表占用ROM问题（转）

    源:unicode转GBK,GNK转unicode,解决FATFS中文码表占用ROM问题 之前一直使用的512KB ROM的STM32,但是最近使用的只有128KB,想用FATFS显示支持长文件名,发 ...

  9. 【转】mysql中文乱码的一点理解

    我们自己鼓捣mysql时,总免不了会遇到这个问题:插入中文字符出现乱码,虽然这是运维先给配好的环境,但是在自己机子上玩的时候咧,总得知道个一二吧,不然以后如何优雅的吹牛B. 如果你也遇到了这个问题,咱 ...

  10. libusb开发者指南（转）

    源:libusb开发者指南 译者: gashero 作者: Johannes Erdfelt 日期: 2010-04-17 地址: http://libusb.sourceforge.net/doc/ ...