精华内容
下载资源
问答
  • 鼠标滚轮事件

    2018-04-02 15:02:58
    labview所编的鼠标滚轮事件,通过鼠标滚轮产生相应事件。
  • VB6鼠标滚轮事件
  • JQ鼠标滚轮事件

    2018-01-22 16:23:13
    JQ鼠标滚轮事件可以响应鼠标滚轮事件,JQ鼠标滚轮事件可以响应鼠标滚轮事件
  • javascript如何绑定对象的鼠标滚轮事件,对对象触发鼠标滚轮事件时,如何阻止鼠标滚轮事件冒泡,不允许当前视窗滚动。下面对主流浏览器进行了测试(firefox12,opera12.5,safari5.0.4,chrome25,IE7~8)事件如何绑定...

    javascript如何绑定对象的鼠标滚轮事件,对对象触发鼠标滚轮事件时,如何阻止鼠标滚轮事件冒泡,不允许当前视窗滚动。

    下面对主流浏览器进行了测试(firefox12,opera12.5,safari5.0.4,chrome25,IE7~8)

    事件如何绑定

    firefox只支持DOMMouseScroll事件,不支持onmousewheel,其他浏览器只支持onmousewheel事件,如下表所示

    浏览器/事件/是否支持

    firefox

    opera

    safari

    chrome

    IE

    DOMMouseScroll

    支持

    onmousewheel

    不支持

    支持

    支持

    支持

    支持

    如何获取鼠标滚轮事件的数据(向上还是向下滚动)

    获取鼠标滚轮事件的数据,firefox,opera可以通过事件的detail属性获取,其他浏览器通过事件的wheelDelta来获取(opera特例,2个都支持),具体数据看下表(注意:wheelDelta和detail的滚动方向值是相反的)

    浏览器/事件数据属性/数据值

    firefox

    opera

    safari

    chrome

    IE

    event.wheelDelta

    都为undefined

    向上滚动,120

    向下滚动,-120

    向上滚动,120

    向下滚动,-120

    向上滚动,120

    向下滚动,-120

    向上滚动,120

    向下滚动,-1200

    event.detail

    向上滚动,-3

    向下滚动,3

    向上滚动,-3

    向下滚动,3

    都为0

    都为0

    都为undefined

    测试代码如下

    var firefox = navigator.userAgent.indexOf('Firefox') != -1;

    function MouseWheel(e) {

    ///对img按下鼠标滚路,阻止视窗滚动

    e = e || window.event;

    if (e.stopPropagation) e.stopPropagation();

    else e.cancelBubble = true;

    if (e.preventDefault) e.preventDefault();

    else e.returnValue = false;

    document.title=(e.wheelDelta + '|' + e.detail)

    }

    window.onload = function () {

    var img = document.getElementById('img');

    firefox ? img.addEventListener('DOMMouseScroll', MouseWheel, false) : (img.onmousewheel = MouseWheel);

    }

    76d8c24ad66588e70fb3de535ab4d6eb.png

    加支付宝好友偷能量挖...

    2013-7-12Web开发网

    展开全文
  • jquery鼠标滚轮事件

    热门讨论 2011-05-13 13:41:43
    jquery鼠标滚轮事件jquery鼠标滚轮事件jquery鼠标滚轮事件jquery鼠标滚轮事件jquery鼠标滚轮事件jquery鼠标滚轮事件jquery鼠标滚轮事件
  • 由于鼠标滚轮事件在 IE 和 FF 的实现有点不一样,所以有需要把这个写成一个统一可用的事件。
  • 主要介绍了java抓取鼠标事件和鼠标滚轮事件示例,需要的朋友可以参考下
  • 鼠标滚轮事件在火狐、IE、谷歌浏览器的兼容性如下 chrome & IE: 滚轮事件:mousewheel 后滚: d3.event.wheelDelta = -120(或者120的整数倍) d3.event.detail = 0 前滚: d3.event.wheelDelta =...
    鼠标滚轮事件在火狐、IE、谷歌浏览器的兼容性如下
    
            chrome & IE:
                  滚轮事件:mousewheel
                  后滚: d3.event.wheelDelta = -120(或者120的整数倍)          d3.event.detail = 0
                  前滚: d3.event.wheelDelta = 120(或者120的整数倍)           d3.event.detail = 0
            firfox:
                  滚轮事件:DOMMouseScroll
                  后滚: d3.event.wheelDelta = undefined     d3.event.detail = 3(或者3的整数倍)

                  前滚: d3.event.wheelDelta = undefined     d3.event.detail = -3(或者3的整数倍)

    实现前滚后滚的案例如下:注:此方式为d3.js实现的,不过原理相同,不熟悉d3.js的可以用jQuery替代实现或者用原生JS实现

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <title>鼠标滚轮事件兼容问题</title>
      <script src="./jquery-1.12.0.min.js"></script>
      <script src="./d3.v4.js"></script>
      <style type="text/css">
        .container {
          width: 500px;
          height: 400px;
          margin:50px auto;
          overflow: hidden;
          position: relative;
        }
        .inner {
          width: 500px;
          height: 400px;
          text-align: center;
          font-size: 100px;
          font-weight: bolder;
          line-height: 400px;
        }
        .inner:nth-child(1){
          background-color: red;
        }
        .inner:nth-child(2){
          background-color: yellow;
        }
        .inner:nth-child(3){
          background-color: green;
        }
        .inner:nth-child(4){
          background-color: pink;
        }
        .inner:nth-child(5){
          background-color: purple;
        }
        #wrapper {
          position: absolute;
        }
      </style>     
    </head>
    <body>
      <div class = "container">
        <div id = "wrapper">
          <div class = "inner">1</div>
          <div class = "inner">2</div>
          <div class = "inner">3</div>
          <div class = "inner">4</div>
          <div class = "inner">5</div>
        </div>
      </div>
      <span></span>
    </body>
    <script>
      var i = 0;
      var step = 400;
      d3.select(".container").on("mousewheel DOMMouseScroll", function () {
        var delta = (d3.event.wheelDelta && (d3.event.wheelDelta > 0 ? 1 : -1)) ||  // chrome & ie
                    (d3.event.detail && (d3.event.detail > 0 ? -1 : 1));              // firefox
        var div = d3.select(".container")._groups[0][0];
    
        if(div.scrollHeight <= div.clientHeight) return true;      
         if (delta > 0 && i > 0) {
          // 前滚
            i--;
            div.scrollTop -= step; 
            console.log("up");         
            if(i < 0) return false;
        
         } else if (delta < 0 && i < 5) {
             // 后滚
            i++;
            div.scrollTop += step;
            console.log("down");
            if(div.scrollTop < (div.scrollHeight - div.clientHeight)) return false;
         }
    
       
       return false;
      });
    </script>
    </html>

    展开全文

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 18,200
精华内容 7,280
关键字:

鼠标滚轮事件