Coordinates updating in both the rectangles- Javascript

Question

I am displaying coordinates when the rectangle moves in the canvas.

I have multiple objects but I want to display the coordinates differently for each object.

to check this. you have to click the checkbox of rectangle then draw the rectangle using mouse events. and next shape you can draw using double click. how can I make sure the coordinates of X and Y updates only when I am moving the Rectangle created using mouse events not the Double click.

http://jsfiddle.net/HA8aP/1/

          mySel.x = mx - offsetx;
        mySel.y = my - offsety;

 $mouse.innerHTML = "(" + mySel.x + "," + mySel.y + ")" ;

     document.getElementById("TextROI_ULx").value=mySel.x;
        document.getElementById("TextROI_ULy").value=mySel.y;

Answer 1

If you just want to update the coordinates for the rectangle that was drawn using mouse events, you could do something like this: http://jsfiddle.net/HA8aP/2/

It adds a name parameter to Box2, and the name for the mouse drawn box will be "initialBox". Then the name is validated when dragging. In this example, all of the double-click created boxes are called "otherBox", but you could just as easily give them all unique names in the addRect function and then generate unique coordinate displays for each one.

if (mySel.name == 'initialBox') {
  $mouse.innerHTML = "(" + mySel.x + "," + mySel.y + ")";

  document.getElementById("TextROI_ULx").value = mySel.x;
  document.getElementById("TextROI_ULy").value = mySel.y;
}

Answer 2

Yes, the browser will always fire both click and dblclick events for a double click.

There are many ways to differentiate between a single and double click.

The solution always goes like this:

• Suspend executing the single-click code for a small bit (200-400ms).
• Listen for additional clicks while the first click is suspended.
• If no additional click occurs, execute code for a single-click.
• If an additional click occurs, execute code for a double-click.

Here is one gist by Jacek Becela that extends jQuery to execute separate callbacks depending on whether the user single-clicked or double clicked: https://gist.github.com/ncr/399624

Extend jQuery to differentiate between single and double clicks:

// Author:  Jacek Becela
// Source:  http://gist.github.com/399624
// License: MIT

jQuery.fn.single_double_click = function(single_click_callback, double_click_callback, timeout) {
  return this.each(function(){
    var clicks = 0, self = this;
    jQuery(this).click(function(event){
      clicks++;
      if (clicks == 1) {
        setTimeout(function(){
          if(clicks == 1) {
            single_click_callback.call(self, event);
          } else {
            double_click_callback.call(self, event);
          }
          clicks = 0;
        }, timeout || 300);
      }
    });
  });
}

Usage:

$("#yourCanvas").single_double_click(
    function(){ console.log("single-click") },
    function(){ console.log("double-click")
})