Please help- How to use Mousewheel EventListener only over certain movieclips?

I'm using a code klad posted for html5 canvas with animate cc using the scroll wheel, to detect scroll up and scroll down to do different things for each one,

but the problem is its detecting the entire canvas.

Is there a way to make it so you can only scroll when the mouse is over certain movie clips with specific ID in html5 canvas?

So I can for example have more control on WHEN you can scroll and WHERE.

Then I can hide and show movieclips on the timeline and only when certain ones with certain ID is visible, and your mouse is over them, then do something different (like playing from  certain frames, depending if you scroll up or down)

It would be so amazing if someone could let me know if this is possible and how to go about it. Here is the current code he posted:

document.getElementById('canvas').addEventListener('mousewheel',f.bind(this));

document.getElementById('canvas').addEventListener('DOMMouseScroll',f.bind(this));

function f(e){

if (e.wheelDelta > 0||e.detail>0){

this.gotoAndPlay(2);

} else if(e.wheelDelta < 0||e.detail<0){

this.gotoAndPlay(10);

}

}