Skip to content

jQuery resizable event does not end

I am making some interactive UI and using jQuery for resize and mouse events.

I bind mouseOver and click event for all elements and when I get a click, I remove the click listener (so that it does not interfere with the resizable listeners).

This works fine till here, now the selected element can be resized. starting the resize works fine, but even after mouseup, the element resize event does not end, its still getting resized, with the mouse.

What’s wrong ?

The thing is located here.

The main parts are :

  inspect = true,           // to disable inspect
  selected = null;          // currently selected event

function clickhandler(e) {
  if (selected != null)return;     // if some div is already selected, then return
  if (e.which == 3)return;         // if it was right click, return
  selected = $(;          // selected = the element which received the click
  inspect = false;                 // disable inspection
  selected.addClass('selected');   // add SELECTED background + border
  $(window).unbind('click', clickhandler);  // remove the click listener
  $('.selected').resizable();               // make the selected element resizable

$(window).bind('click', clickhandler);    //bind the click event

Esc key is bound to unselect any selection.


The contextMenu(which is listening to mouseclick event) is interefering with the resize end Event(which also wants the mouseclick event). Solution :

    start:function () {
      console.log('resize started');
    stop:function () {

        function (action, el, pos) {
          eval(action + '(el)');
      console.log('resize stopped');
    resize:function () {
      console.log("resize happened");

What i did was, destroy the context menu as soon as the resize started, so its not listening to the mouseclick event anymore. and make it back when the resize event ends.