Prevent default only on parent or change the target of the prevent default

Question

I am listening on scroll event on div (let's name it scroll_div) that contains textarea.

In given scenario (the scenario is not important) I do "e.preventDefault()" when scrolling.

When the e.target is the textarea, I don't want to prevent the scroll inside the textarea... Only to preven default on scroll_div.

I tried:

 if(e.target.type !== "textarea") {
            this.preventDefault(e);//Don't scroll
        } else {
            this.stopPropagation(e);
        }

But when I do it - the body is scrolling (and I don't want it to happened)

Suggestions?

possible duplicate of [prevent Scroll "bubbling" from element to window](http://stackoverflow.com/questions/1459676/prevent-scroll-bubbling-from-element-to-window) — Craicerjack, Jun 04 '15 at 10:23

Craicerjack · Answer 1 · 2015-06-04T10:25:58.803

0

You might be looking for:

event.stopPropagation();

Prevents further propagation of the current event.

This should stop events from bubbling up the DOM. More details about this can be found here - https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation

Okay so this doesnt work -

$('#foo').scroll(function(ev) {
    ev.preventDefault();
});

because the scroll event happens on scroll, but is not the actual scroll event itself.
This is called either mousewheel or DOMMouseScroll, depending on your browser. so doing:

$('#foo').on('mousewheel DOMMouseScroll', function(ev) {
    ev.preventDefault();
});

should do the trick.

edited Jun 04 '15 at 10:25

answered Jun 04 '15 at 08:56

Craicerjack

5,524
2
27
36

On scrolling event it's not helping. – Megi Ben Nun Jun 04 '15 at 09:05
Is there anyway to prevent the default only on the parent? – Megi Ben Nun Jun 04 '15 at 09:06

Prevent default only on parent or change the target of the prevent default

1 Answers1