CODEWITHSUNDEEP
javascripthtmlcssangularjs
Nathan Reese
Nathan Reese

Reputation: 2734

How do I stop mousedown event from triggering in the outer element?

I have implemented the Angular draggable directive as provided by angular at, https://docs.angularjs.org/guide/directive. It basically just puts an event listener on the mousedown event and moves the position until a mouseup event.

<div class="draggable">
  <input type="text"></input>
</div>

The problem arises when you try to highlight the text in the input. The div captures the event and thinks that the mousedown is signaling the drag action instead of highlighting the text in the input.

How do I stop the mousedown event from triggering the div mousedown event when users mousedown in the input elements?

Upvotes: 0

Views: 2399

Answers (1)

Richard Hamilton
Richard Hamilton

Reputation: 26434

Sounds like what you are looking for is event.stopPropogation

https://api.jquery.com/event.stoppropagation/

Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.

I see that you mentioned Angular. You could try something like this.

.directive('myDirective', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attr) {
            element.bind(mouseover, function (event) {
                event.stopPropagation();
            });
        };
     });

Upvotes: 1

Related Questions