Не удается прослушать DOMMouseScroll в окне в Firefox

У меня возникла проблема, связанная с событием колесика мыши (DOMMouseScroll) в firefox. У меня есть div заголовка, div контента и div нижнего колонтитула. Я хочу, чтобы пользователь мог прокручивать страницу в верхнем и нижнем колонтитулах, но не в содержимом, потому что у него есть объект карты (флэш-объект), а колесико мыши должно увеличивать и уменьшать масштаб.

Я использую 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);

Я проглядел что-то простое или что?

Спасибо за помощь,

Ггилманн

Добавлено:

Следуя предложению Фабрицио Матте, я также попробовал это:

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

И это :

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

Но безрезультатно!

Добавлено снова:

jcubic предложил мне использовать плагин на этой странице: github.com/brandonaaron/jquery-mousewheel

Я не слишком уверен, как это работает, я должен просто включить скрипт на свою страницу через тег скрипта, а затем вызвать один из методов, как показано в примере по предоставленной ссылке?

Спасибо

Дополнительное дополнение:

Плагин у меня заработал, все очень просто. Однако это не решает мою проблему. Это работает для стандартного div, но, похоже, не работает для 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(); 
    }
}

Это позволяет мне определить, когда пользователь прокручивал viewerContent в FireFox. Однако события предотвращения по умолчанию и остановки распространения не работают. Страница продолжает прокручиваться.


person Ggilmann    schedule 03.10.2012    source источник
comment
Вы пробовали $('#viewerContent').on('scroll', handler) / $('#viewerContent').scroll(handler)? Конечно, если вы действительно хотите отменить событие прокрутки, это будет просто раздражать пользователя, но теоретически e.preventDefault() должно работать.   -  person Fabrício Matté    schedule 03.10.2012
comment
Только что попробовал, безрезультатно. Предупреждения не всплывают.   -  person Ggilmann    schedule 03.10.2012
comment
Для такого события постарайтесь не предупреждать, а вместо этого используйте что-то вроде console.log или добавьте что-нибудь в выходной div для тестирования.   -  person Ian    schedule 03.10.2012
comment
Да, это раздражает, когда это работает! Хороший совет для console.log. Все равно нужно решение!   -  person Ggilmann    schedule 03.10.2012
comment
Для этого есть плагин jquery, github.com/brandonaaron/jquery-mousewheel   -  person jcubic    schedule 04.10.2012
comment
Да, я видел эту страницу, но я не совсем уверен, как заставить ее работать... Завтра утром я изучу ее подробнее. По сути, я должен просто включить файл js в качестве скрипта на свою страницу, а затем вызвать метод, как показано в примере по предоставленной вами ссылке?   -  person Ggilmann    schedule 04.10.2012
comment
Так что я попробовал этот плагин, он также не работал. Однако мне удалось заставить его работать с пустым div. Я начинаю подозревать, что у firefox есть проблема с отправкой или прослушиванием события DOMMouseScroll в div с флэш-контентом.   -  person Ggilmann    schedule 04.10.2012
comment
События мыши будут срабатывать только в самой среде Flash, а не возвращаться обратно в браузер, очевидно, в зависимости от браузера. Иногда этого можно избежать, изменив параметр flash wmode на opaque. Это означает, что браузер пытается отобразить окно Flash как часть фактической страницы, однако это может иметь побочные эффекты для содержимого Flash. helpx.adobe.com/flash/kb/   -  person Pebbl    schedule 04.10.2012
comment
Просто для подтверждения, этот непрозрачный параметр должен быть установлен при встраивании SWF справа (swfobject.embedSWF(...)) ? Если это так, я только что попробовал, и это не сработало.   -  person Ggilmann    schedule 04.10.2012


Ответы (4)


Согласно этой странице (http://bytes.com/topic/javascript/answers/160971-window-onscroll-firefox) вы можете попробовать window.onscroll = scrollHandler; Попробуйте.

person sethetter    schedule 04.10.2012
comment
Это было справедливое предположение до того, как OP отредактировал, чтобы объяснить, что настоящая проблема заключается в использовании элемента Flash на странице. С добавлением этой новой информации это больше не является хорошим ответом. (Но не стесняйтесь редактировать или публиковать новый ответ на основе новой информации!) - person apsillers; 04.10.2012
comment
На самом деле кажется, что с помощью комбинации mouseover/mouseout для viewerContent я могу определить, когда пользователь прокручивал флэш-контент или нет. Теперь мне просто нужно выяснить, как остановить прокрутку страницы. - person Ggilmann; 04.10.2012
comment
Смотрите исходный пост. Я добавлю свое текущее решение. - person Ggilmann; 04.10.2012

Основываясь на предложении 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 и других браузерах. При прокрутке флеш-объекта возникает своего рода сбой, но он не позволяет пользователю прокручивать страницу. Кроме того, кажется, что сбойный эффект наименее заметен в Firefox, поэтому я оставил лучшие решения для IE и Chrome.

Поскольку sethetter направил меня на правильный путь, я отмечаю его ответ как решение.

Ваше здоровье!

Ггилманн

person Ggilmann    schedule 04.10.2012

Просто увидев аналогичную проблему и используя

onwheel

вместо

onDomMouseScroll

может решить мою проблему.

person Fabian    schedule 28.01.2015

Я нашел решение в ошибке события прокрутки колесика мыши 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;
        });

удачи.

person Hamid Reza    schedule 18.02.2014