【问题标题】:Is there a way to make a mousewheel trigger the "hover" event in Javascript?有没有办法让鼠标滚轮触发 Javascript 中的“悬停”事件?
【发布时间】:2016-06-08 01:26:34
【问题描述】:

默认情况下,如果用户使用鼠标滚轮向下滚动页面,它不会触发任何悬停事件。有没有办法改变这一点,只要指针悬停在 div 上,无论用户是使用鼠标还是鼠标滚轮将其移动到那里,它都会触发悬停事件?

$(window).load(function() {
  $(document).bind('mousewheel', function(e) {
    console.log(e.pageX);
    console.log(e.pageY);
    var e1 = $.Event('mouseenter');
    e1.pageX = e.pageX + 1;
    e1.pageY = e.pageY;
    $('img').trigger(e1);

    var e2 = $.Event('mousemove');
    e2.pageX = e.pageX + 1;
    e2.pageY = e.pageY;
    $('img').trigger(e2);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

编辑:上面的代码触发了一个悬停事件,但它并没有特别选择任何图像,它只是在每次鼠标移动时触发悬停事件。

【问题讨论】:

  • 您是否尝试在滚动停止后触发mousemove 事件?
  • 我不确定触发 mousemove 事件是什么意思。甚至可以用javascript移动鼠标吗?
  • 是的,可以模拟 mousemove 事件。
  • 我想我已经很接近了,看看我最后的编辑,如果你能帮忙,请告诉我!

标签: javascript jquery mouseevent mousewheel


【解决方案1】:

这可能有效:

var x = 0, y = 0;

$(document).bind('mousemove', function(event) {x = event.clientX; y = event.clientY;});

$(document).bind('mousewheel', function(e1) {
    var rand = Math.floor(Math.random*2) ? 1 : -1;
    X = x+rand;
    Y = y;
    setTimeout(function() {$("body").trigger($.Event("mousemove", {clientX: X, clientY: Y}));}, 400);
});

【讨论】:

  • 我的代码和你的很相似,但我想在图像上触发悬停事件,并且使用 $('img').trigger 不会特别选择一个图像......跨度>
  • 在 body 上触发 movemouse 事件应该会在鼠标当前所在的元素上激活 css hover 事件。
  • 我试过了,不幸的是它没有触发任何东西。
  • 啊,我的网站上有一个 CSS 设置阻止了悬停,这个答案是正确的(缺少“);”最后供将来需要此解决方案的人使用)。非常感谢!
  • 修正了缺少的结束括号。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2012-11-26
  • 2013-09-30
  • 1970-01-01
  • 1970-01-01
  • 2023-03-21
相关资源
最近更新 更多