<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

    </head>

    <body style="height: 2000px;">

        <style type="text/css">

            #div1{width:100px;height:100px;background: red;}

        </style>

        <script type="text/javascript">

            window.onload = function(){

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

                /*

                ie/chrome : onmousewheel

                    event.wheelDelta  //firefox 下没有这个属性

                    上 ： 120

                    下 ：-120

                firefox : DOMMouseScroll  必须用addEventListener

                addEventListener 必须是标准浏览器才支持 （ie6 7 8 用的是attachEvent）

                    event.detail

                    上：-3

                    下：3                    

                return false 阻止的是 obj.on事件名称=fn 所触发的默认行为

                addEventListener绑定的事件需要通过event下面的preventDefault();

                */

                oDiv.onmousewheel = fn;

                if(oDiv.addEventListener){

                    oDiv.addEventListener('DOMMouseScroll', fn ,false);

                }

                function fn(ev){

                    //alert()

                    var ev = ev || event;

                    //alert(ev.wheelDelta);

                    //alert(ev.detail)

                    var b = true;

                    if(ev.wheelDelta){

                        b = ev.wheelDelta > 0 ? true : false

                    }else{

                        b = ev.detail <  0 ? true : false

                    }

                    //alert(b)

                    if(b){

                        this.style.height = this.offsetHeight - 10+'px';

                    }else{

                        this.style.height = this.offsetHeight + 10+'px';

                    }

                    if(ev.preventDefault){

                        ev.preventDefault();

                    }

                    return false;

                }

            }

        </script>

        <script type="text/javascript">

            //return false 阻止的是 obj.on事件名称=fn 所触发的默认行为

            //    addEventListener绑定的事件需要通过event下面的preventDefault();

            //阻止默认行为是根据事件的绑定决定的

            //右键行为阻止

            var context1 = function(){

                document.oncontextmenu = function (){// chrome

                    return false;

                }

            }

            //context1()  //标准浏览器

            var context2 = function (){

                document.addEventListener('contextmenu',function(ev){

                    ev.preventDefault();

                    //return false;

                })

            }

            //context2()

            var context3 = function(){

                document.attachEvent('contextmenu',function(){

                    return false;

                })

            }

            context3() //IE非标准

        </script>

        <div id="div1"></div>

    </body>

</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. STM8单片机启动流程彻底探究--基于IAR开发环境

    初学STM8会发现,STM8官方的固件库并没有提供一个.s文件的启动代码,那么她是如何启动然后跳转到main函数执行的呢 首先,我们根据ARM的只是可以推测,STM8也是通过复位向量来启动的,假设流程 ...

  2. Python+Selenium+PhantomJS下载JavaScript异步加载网页

    # -*- coding: utf-8 -*- from selenium import webdriver import selenium.webdriver.support.ui as ui fr ...

  3. spring加载过程中jar包加载不了，解决方法

    当我们在开发spring项目时,一般会将jar包放到webInf/lib下,这样是myeclipse自动将jar包加载到tomcat中webapps下,但是当我们新建一个lib文件夹的情况下,我们ad ...

  4. bzoj1562【Noi2009】变换序列

    题意:http://www.lydsy.com/JudgeOnline/problem.php?id=1562 给一个序列Di表示min(|i-Ti|,n-|i-Ti|),求一个字典序最小的序列Ti ...

  5. 6种炫酷的CSS3按钮边框动画特效

    6种炫酷的CSS3按钮边框动画特效Button border animate 用鼠标滑过下面的按钮看看效果! Draw Draw Meet Center Spin Spin Circle Spin T ...

  6. ios系统 ipa文件 打包流程详解 及 常见问题处理

    注:先反省一下,原本打算一天一篇,每天进步一点点,但是最近变懒了,居然三天没有更新,在此告诫各位道友及我自己,程序员需戒欲,搞技术需持之以恒,不能三天打鱼,两天晒外. 现在步入主题,前段时间使用xco ...

  7. 移位操作<< >> 小计

    最近看代码移位操作的使用比较多,通过查阅资料搞明白了之前一直不明白的一个问题 移位效果: 左移位<<: 相当于乘以  2的左移位的相应次方   例如: x << 3    =& ...

  8. Thinking in scala (4)----阶乘与尾递归

    code1: object factorial{ def main(args:Array[String])={ println(factorial(args(0).toInt)) } def fact ...

  9. jstree使用小结(二)

    继续上一篇: 1.数据 按照官网的json数据返回格式: 有两种格式,我使用的格式如下: $('#jstree1').jstree({ 'core' : { 'data' : [ { "id ...

  10. HttpListener 实现web服务端

    1. using System; using System.Collections.Generic; using System.Linq; using System.Text; using Syste ...