<!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. 一道js题（引用类型、基本类型、包装对象、函数赋值）

    var a = 1; var obj = {     b: 2 }; var fn = function () {}; fn.c = 3;   function test(x, y, z) {     ...

  2. 2快速掌握OMD

    我们已经知道使用ArcGIS Engine开发,也就意味着我们要和接口打交道,ArcGIS Engine中提供的接口和类加起来估计上万,但是用过ArcGIS Engine的人,知道这个数字不为过.Ar ...

  3. PAT 天梯赛 L2-004 这是二叉搜索树吗？

    递归判断+建树 题目链接:https://www.patest.cn/contests/gplt/L2-004 题解 二叉搜索树的特点就是其根节点的值是位于左右子树之间的,即大于左子树的所有值,但是小 ...

  4. php 依赖注入容器

    原文: http://blog.csdn.net/realghost/article/details/35212285 https://my.oschina.net/cxz001/blog/53316 ...

  5. Python+Selenium定位不到元素常见原因及解决办法（报：NoSuchElementException）

         在做web应用的自动化测试时,定位元素是必不可少的,这个过程经常会碰到定位不到元素的情况(报selenium.common.exceptions.NoSuchElementException ...

  6. Python正则表达式学习笔记

    [] 字符类,只要匹配里面的任意字符,都算匹配 . 元字符,可以匹配除换行符之外的所有字符 大小写敏感,但是可以关闭 \d  可以匹配0-9中的任意数字 {3}大括号里面的数字,边上前面一个字符匹配的 ...

  7. 用命令行使用soot反编译生成jimple

    使用工具:soot-2.5.0.jar 注意:soot-2.5.0.jar必须使用Java1.7以及之前的版本,使用Java1.8会发生错误. 修改jdk的方法是在设置java_home的路径的时候, ...

  8. (简单) POJ 2387 Til the Cows Come Home，Dijkstra。

    Description Bessie is out in the field and wants to get back to the barn to get as much sleep as pos ...

  9. [Unity]C#中 将XML和实体类之间进行相互转换的工具类

    using System; using System.Xml; using System.Xml.Serialization; using System.IO; namespace LOTool { ...

  10. java之常用正则表达式

    http://www.cnblogs.com/helloczh/articles/1648029.html http://wenku.baidu.com/link?url=gLcsovVfQqRTVa ...