title: jQuery UI: Click event is being triggered on resize
body: <p>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 <code>event.stopPropagation()</code> but it doesn't work apparently.</p>
  
  <p>Here's a simple form of my html:</p>
  
  <pre><code>&lt;div class="parent"&gt;
      &lt;div class="child ui-resizable"&gt;
          ...
          &lt;div class="ui-resizable-handle ui-resizable-s"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And my js looks like this:</p>
  
  <pre><code>$('.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();
      },
  
  })
  </code></pre>
  
  <p>Dragging the handler is triggering the click event.
  Is there a way to prevent click event from action?</p>