jQuery UI: Click event is being triggered on resize

Question

I am using jQuery Ui resizable on an element. But resizing event is triggering click event of the element itself and click event of its parent. I have tried using event.stopPropagation() but it doesn't work apparently.

Here's a simple form of my html:

<div class="parent">
    <div class="child ui-resizable">
        ...
        <div class="ui-resizable-handle ui-resizable-s"></div>
    </div>
</div>

And my js looks like this:

$('.parent').on('click',function(){
   openModal();
});

$('.child').on('click',function(e){
    e.stopPropagation(); // To Prevent the child triggering parent click event.
    openSecondModal();
});

$('.ui-resizable').resizable({
    ghost: true,
    grid: 24,
    handles: "s",
    resize: function (event, ui) {
        event.stopPropagation();
    },
    start: function (event, ui) {
        event.stopPropagation();
    },
    stop: function (event, ui) {
        event.stopPropagation();
    },

})

Dragging the handler is triggering the click event. Is there a way to prevent click event from action?

Answer 1

Maybe this will work for you:

$('.parent').on('click',function(e){
   if(e.target !== e.currentTarget) return;
   openModal();
});