0

我遇到了一个与 Firefox 的鼠标滚轮（DOMMouseScroll）事件相关的问题。我有一个标题 div、一个内容 div 和一个页脚 div。我希望用户能够在页眉和页脚上滚动页面，但不能在内容上滚动，因为它有一个地图对象（flash 对象）并且鼠标滚轮应该放大和缩小。

我正在使用 jQuery 1.8 和 Firefox 15.0.1。我花了几乎一整天的时间试图弄清楚这一点，在我看来这应该可行：

var isFireFox = (navigator.userAgent.indexOf('Firefox') != -1); 
var scrollEv = (isFireFox)? 'DOMMouseScroll' : 'mousewheel';

$(document).on(scrollEv, HandleScroll);

function HandleScroll(e)
{
    var sender = event.srcElement;

    alert(sender.id + " has sent event: " + e.type);

    if (sender.id == "viewerContent" || sender.id == "mapObject")
    {
        alert("Event is being blocked");
        e.stopPropagation();
        e.preventDefault(); 
    }
}

我已经阅读了无数的帖子、线程和博客，我读到的所有内容都说这应该在 IE、Chrome 和 Firefox 中工作。当然，它在 FireFox 中不起作用。它甚至没有进入“HandleScroll”功能。另外，我认为甚至应该可以做一些更简单的事情，比如：

$('#viewerContent').on(scrollEv, false);
$('#mapObject').on(scrollEv, false);

我是否忽略了一些简单的事情或什么？

谢谢您的帮助，

吉尔曼

添加 ：

按照 Fabrício Matté 的建议，我也尝试了这个：

$('#viewerContent').scroll(HandleScroll);
$('#mapObject').scroll(HandleScroll);

还有这个 ：

$('#viewerContent').on('scroll', HandleScroll);
$('#mapObject').on('scroll', HandleScroll);

无济于事！

再次添加：

jcubic 建议我使用此页面上的插件：github.com/brandonaaron/jquery-mousewheel

我不太确定它是如何工作的，我是否应该通过脚本标记简单地将脚本包含在我的页面中，然后调用所提供链接示例中所示的方法之一？

谢谢

进一步补充：

我得到了插件工作，这很容易。但是，这并不能解决我的问题。它确实适用于标准 div，但它似乎不适用于包含 flash 内容的 div。我开始认为这是一个 flash 或 firefox 错误，可能在此处详述：http: //cookbooks.adobe.com/post_Workaround_to_support_mouse_wheel_for_FireFox_with-13086.html

如果有人能证实这一点，我将不胜感激。

另一个不起作用的解决方案：

按照 sethetter 的建议，我尝试了这个：

var isOverContent;

$('#viewerContent').on('mouseover', function(){isOverContent = true;});
$('#viewerContent').on('mouseout', function(){isOverContent = false;});

document.onscroll = HandleScroll;

function HandleScroll(e)
{       
    if (isOverContent)
    {               
        console.log("Tried to block event");
        e.stopPropagation();  // Apparently, the "scroll" event cannot be prevented or canceled.
        e.preventDefault(); 
    }
}

这允许我检测用户何时在 FireFox 中滚动查看器内容。但是，阻止默认和停止传播事件不起作用。页面不断滚动。

4

4 回答 4

1

根据此页面（http://bytes.com/topic/javascript/answers/160971-window-onscroll-firefox），您可以尝试 window.onscroll = scrollHandler; 试一试。

于 2012-10-04T13:18:22.260 回答
1

在 sethetter 建议的基础上，我最终写了这个：

<script type="text/javascript">
  var isFireFox = (navigator.userAgent.indexOf('Firefox') != -1);   

  if (!isFireFox)
  {
      $('#viewerContent').on('mousewheel', false);
      $('#mapObject').on('mousewheel', false);
  }     
  else if (isFireFox)
  {
    var isOverContent;                                                   
    var lastPosY;

    $('#viewerContent').on('mouseover', function(){isOverContent = true;});
    $('#viewerContent').on('mouseout', function(){isOverContent = false;});

    window.onscroll = HandleScroll;
  }

  function HandleScroll(e)
  { 
    if (isOverContent)
    {                   
      $(window).scrollTop(lastPosY);    
    }
    else
    {
      lastPosY = $(window).scrollTop();
    }
  }
</script>

它并不漂亮，但它适用于 Firefox 和其他浏览器。当在 flash 对象上滚动时，它确实会发出一种故障效果，但它会阻止用户滚动页面。此外，似乎故障效果在 Firefox 中最不明显，因此我为 IE 和 Chrome 保留了更好的解决方案。

由于 sethetter 让我走上了正确的道路，我将他的答案标记为解决方案。

干杯!

吉尔曼

于 2012-10-04T15:21:41.070 回答
1

只是看到类似的问题并使用

onwheel

代替

onDomMouseScroll

可以解决我的问题。

于 2015-01-28T12:53:47.763 回答
0

我在firefox+jquery 鼠标滚轮滚动事件错误中找到了一个解决方案。

通过以下代码检查它：

$(document).bind("mousewheel DOMMouseScroll", function (e) {
            e.stopImmediatePropagation();
            e.stopPropagation();
            e.preventDefault();

            var delta = parseInt(e.originalEvent.wheelDelta || -e.originalEvent.detail);

            alert(delta);
            return false;
        });

祝你好运。

于 2014-02-18T08:33:03.367 回答