Sam
Sam

Reputation: 855

JavaScript preventDefault also block flash scroll event in Chrome

My colleague who is responsible for Flash asks me help him block document scroll default action.

And I add the following code to help him.

<script type="text/javascript">
(function (document) {
    var cancelscroll = function (e){
        e.preventDefault();
    };

    if ('onmousewheel' in document) {
        document.getElementById('container').onmousewheel = cancelscroll;
    } else {
       document.getElementById('container').addEventListener('DOMMouseScroll', cancelscroll, false);
    }
})(document);
</script>

It works well in IE9 and Firefox, but it also blocks Flash scroll event in Chrome.

I think it is weird, the snippet should only block JavaScript event, why it also blocks Flash event.

My colleague said he registers scroll event by this snippet:

stage.addEventListener(MouseEvent.MOUSE_WHEEL, mask_wheel);

He only get the delta value in the callback, without doing other task.

I'm not familiar with Flash, and my colleague isn't familiar with JavaScript...

Anyone has this problem, too? How to fix it? Thanks.

Upvotes: 0

Views: 761

Answers (1)

KumoKairo
KumoKairo

Reputation: 678

After three days of brainstorm I finally found the solution (this problem was of utmost importance for me) I created a small lib that helps you to take care of this "bug" in chrome browser: Github repo

It's almost just like MouseWheelTrap, you have to call .init() function, which now requires one additional parameter - your flashObject id or name. See repo README for more info.

So here's my solution: We listen to the scroll event in our browser and when it happens AND we have chrome browser, we call an internal function in flash which imitates user scroll (we manually dispatch an event right onto the stage) BEFORE we call event.preventDefault() function in our JS script. If we have a different browser it just calls event.preventDefault() (or returnValue = false for IE) to prevent double event lag in flash.

Cheers!

Upvotes: 1

Related Questions