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.
http://parth.me/builderjs/index.html
The main parts are :
var inspect = true, // to disable inspect selected = null; // currently selected event function clickhandler(e) { console.log('click'); if (selected != null)return; // if some div is already selected, then return if (e.which == 3)return; // if it was right click, return selected = $(e.target); // 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.
Advertisement
Answer
The contextMenu(which is listening to mouseclick event) is interefering with the resize end Event(which also wants the mouseclick event). Solution :
$('.selected').resizable({ start:function () { $("*").destroyContextMenu(); console.log('resize started'); }, stop:function () { $("*").contextMenu({ menu:'myMenu' }, function (action, el, pos) { console.log(el); 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.