CODEWITHSUNDEEP
javascriptangulargithubmoduleresizable
jimas13
jimas13

Reputation: 658

How to stop event propagation/bubbling in custom events

I'm using an module-project from Github on my Angular project, that lets me resize my DOM elements, which are drawn on top of a div, that works as a draw-board.

To shape my first elements, who are simple rectangles, by the way, i am using a mouseDown - mouseMove - mouseUp combination Event Listener, and then when i decide to resize one i hover over the edges and resize it.

Problem is that on the resizing event, which is a combination of resizestart - resizing - resizeend, although i know that the module is using and mouseDown-Move-Up Event listener and emits the events mentioned before, i cannot get the MouseEvent created, and instead i get the ResizeEvent, which doesn't have a stopPropagation() method, so calling it as it is gives an error(that it's not a function).

I need to stop Propagation, because when i resize my Elements on my draw-board the click event gets bubbled to the immediate parent element, and as a consequence i resize an existing element and create a new rectangle at the same time.

On top of that, the ResizeEvent doesn't even include an "event.target"-like property which makes matters worse...

So, i was wondering how can i work around this one??

I was thinking using @HostListeners, but wouldn't the code executed in that directive get mixed up with the Resizable directive(the module is declared as a directive)??

And messing around with the Resizable-module files doesn't sound like a good idea, since if anyone wants to use my module will have to download my tampered files of the resizable project...

Upvotes: 1

Views: 670

Answers (1)

Sachin Bankar
Sachin Bankar

Reputation: 382

Answer to your question is :

event.preventDefault() will stop the default functionality.

I think this may solve your issue.

The event.preventDefault() method stops the default action of an element from happening.

For example:

Prevent a submit button from submitting a form
Prevent a link from following the URL

 $(document).ready(function(){
    $("a").click(function(event){
        event.preventDefault();
    });
});

Upvotes: 1

Related Questions