jQuery中有鼠标滚轮事件么？

Posted 2023-04-28

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery中有鼠标滚轮事件么？相关的知识，希望对你有一定的参考价值。

jquery插件默认是不支持鼠标中轮滚轮事件的。jQuery Mousewheel Plugin,用于添加跨浏览器的鼠标滚轮支持。mousewheel事件的处理函数有一点小小的变化，它除了第一个参数event 外，还接收到第二个参数delta。通过参数delta可以获取鼠标滚轮的方向和速度。如果delta的值是负的即-1，那么滚轮就是向下滚动，正的1就是向上。

1.下载jquery-mousewheel插件。

2,复制代码: $('body').mousewheel(function(event, delta) var dir = delta > 0 ? 'Up' : 'Down'; if (dir == 'Up')

console.log('向上滚动');
else
console.log('向下滚动');
return false;

);

参考技术A

这个事件在标准下和IE下是有区别的。

firefox是按标准实现的,事件名为"DOMMouseScroll ",IE下采用的则是"mousewheel "。

当然一行代码就解决了兼容问题
var mousewheel = document.all?"mousewheel":"DOMMouseScroll";

事件属性，IE是event.wheelDelta，Firefox是event.detail 属性的方向值也不一样，IE向上滚 > 0，Firefox向下滚 > 0。

监听鼠标滚轮（js+jq），xp系统下也OK

应项目需求，运用了监听滚轮的事件，发现在xp系统下使用jquery的mousewheel.js来做，会导致无论滚轮怎么滚，都只能向下滚。。。后面使用了原生js的，就可以了。

jquery：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>鼠标滚轮_jquery</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js"></script>
  <style>
    #did {
      width: 100px;
      height: 100px;
      background-color: #0ff;
    }
  </style>
</head>
<body>
  <div id="did"></div>
  <label for="detail">滚动方向:</label><input type="text" id="detail" />
</body>
<script>
  $(document).ready(function () {
    $("#did").on(‘mousewheel‘, function (event, delta) {
      var dir = delta > 0 ? ‘向上‘ : ‘向下‘;
      $("#detail").val(dir)
    });
  });
</script>

</html>

原生js（xp系统下用这个）：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>鼠标滚轮_原生js</title>
</head>
<style>
  #did {
    width: 100px;
    height: 100px;
    background-color: #0ff;
  }
</style>
<body>
  <div id="did"></div>
  <label for="wheelDelta">滚动方向:</label>(IE/Opera)<input type="text" id="wheelDelta" /><br>
  <label for="detail">滚动方向:(Firefox)</label><input type="text" id="detail" />
</body>
<script>
  var scrollFunc = function (e) {
    e = e || window.event;
    var t1 = document.getElementById("wheelDelta");
    var t2 = document.getElementById("detail");
    if (e.wheelDelta) { //IE/Opera/Chrome 
      t1.value = e.wheelDelta < 0 ? ‘向下‘ : ‘向上‘;
    } else if (e.detail) { //Firefox 
      t2.value = e.detail < 0 ? ‘向上‘ : ‘向下‘;
    }
  }
  /*注册事件*/
  if (document.getElementById("did").addEventListener) {
    document.getElementById("did").addEventListener(‘DOMMouseScroll‘, scrollFunc, false);
  } //W3C 
  document.getElementById("did").onmousewheel = scrollFunc; //IE/Opera/Chrome
</script>
</html>

G~ G~ Study。

以上是关于jQuery中有鼠标滚轮事件么？的主要内容，如果未能解决你的问题，请参考以下文章

firefox+jquery 鼠标滚轮滚动事件错误

js中如何禁用鼠标滚轮事件？急，在线等！