Question

我遇到了与firefox的mousewheel（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);

我忽略了一些简单或什么？

感谢您的帮助，

Ggilmann

已添加：

遵循FabrícioMatté的建议，我也试过了：

$('#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中的viewerContent。但是，防止默认和停止传播事件不起作用。页面继续滚动。

Answer 1

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

Answer 2

在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让我走上正确的道路，我将他的答案作为解决方案。

干杯！

Ggilmann

Answer 3

我在firefox+jquery mousewheel scroll event bug找到了解决方案。

通过以下代码检查：

$(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;
        });

祝你好运。

Answer 4

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

onwheel

而不是

onDomMouseScroll

可以解决我的问题。

无法在Firefox中收听Window上的DOMMouseScroll

4 个答案: