JAVASCRIPT : 鼠标滚轮转动

JAVASCRIPT : Mouse wheel turning

本文关键字：鼠标 JAVASCRIPT      更新时间：2023-09-26

我有一个没有滚动的页面。

如何设置鼠标滚轮转动时的警报（例如）？

例如，当鼠标滚轮打开元素时：

$(document).ready(function(){
  $('#div').mouseWheel(function(){
    alert('test');
  });
});
好的，

如果你需要鼠标滚轮，你应该考虑jquery-mousewheel插件。在那里，您可以绑定"鼠标滚轮"事件。

该事件还附带 deltaX 和 deltaY 信息，您可以从中推断鼠标滚轮是向上滚动（deltaY> 0）还是向下滚动（deltaY <0）。

通过鼠标滚轮向上/向下检测查看它的实际效果

.HTML：

<div id="mydiv" style="background: green; width: 400px; height: 400px;">
    a div
</div>

JAVASCRIPT：

$('#mydiv').hover(function() {
   $(this).data('hover',1); // mouse is over the div
}, function(){
   $(this).data('hover',0); // mouse is no longer over the div
});
$(document).mousewheel(function(event, delta, deltaX, deltaY) {
    if($('#mydiv').data('hover') == 1 && $(document).attr('alert-on') != 1) {
        $(document).attr('alert-on', 1) 
        if(deltaY > 0) {
            alert('wheel scrolls up');
        } else {
            alert('wheel scrolls down');
        }
        $(document).attr('alert-on', 0) 
    }
});

它的作用是在鼠标结束时在您的div 上设置一个标志，一旦捕获鼠标滚轮事件，它就会检查您是否使用鼠标越过<div>，如果是时它会显示一个警告框。

它还在显示警告框的文档上设置一个标志，因为每次将滚动轮稍微转动一点时都会发出鼠标滚轮事件，这会导致许多警报框相互堆叠。

您可以检测滚动，但无法检测它是通过鼠标滚轮、滚动条、指垫、触摸屏还是其他方法进行的。

您在浏览器中得到的只是一个滚动事件。

我想这不是你想听到的。不好意思。

相关文章：