Using onclick and ondblclick with setTimeout

[Paul Michael Serrano]

Good Day,

Could anyone help me, I need to have an onclick and ondblclick within the same <td> element. As I was looking for the solutions in the internet I saw some thread that says use the setTimeout to delay the onclick event. However while using the code from the thread, I think the event parameter from the first function is null. I need the event parameter for my openPopup function that will determine the coordinates of the <td> element

    
var iTimeoutId = null;

// on single click, quick add should be shown..
tdElem.onclick =  function(event) {
  iTimeoutId = setTimeout(function() {openPopup('div_quickAddSchedule',340, event);
  setCellID(this.id);}, 1000);
};
	   
//in weekview, inside cell, on double click, a popup needs to be opened..
tdElem.ondblclick = function() {
  if (iTimeoutId) {
    window.clearTimeout(iTimeoutId);  
  }
  schedForm.action = "fullAddViewPers";
  schedForm.submit();
};

[Bear Bibeault]

The event parameter will be null in IE, which, inexplicably, still uses a proprietary event model.

In real browsers, the event parameter will reference the Event instance and be available within the callback function via closure.

[Paul Michael Serrano]

Hi Bear,

So how do I make the onclick and ondblclick working for the same <td> element? Or are there any work around for this one?

-Paul

[Bear Bibeault]

Setting both a click and a dblclick handler on an element is dicey. What generally happens is that, upon a double-click, you get the click handler invoked twice, followed by the dblclick handler.

I suppose you could use setTimout to delay the processing so that the dblclick handler can set a flag that tells the delayed click handlers to not do anything (if that's your intent). A bit messy.

[Paul Michael Serrano]

Good Day,

I do have one concern regarding this one. The code written above is working properly (using setTimeout) on Mozilla FireFox. But when I tried to test it in IE7/IE8 the event object is gone.

There is an error of "Object required".

Any Idea?

-Paul

[Bear Bibeault]

As already pointed out, IE, inexplicably, unconscionably, still uses a proprietary event model. You'll need to make allowances for this or to use a library such as jQuery (highly recommended) that abstracts the differences away.

[Paul Michael Serrano]

Hi Bear, I just started reading jquery and this is my first time to write code. Did I translated my code to jquery code properly?

OLD CODE

    
var iTimeoutId = null;   
  
// on single click, quick add should be shown..   
tdElem.onclick =  function(event) {   
  iTimeoutId = setTimeout(function() {openPopup('div_quickAddSchedule',340, event);   
  setCellID(this.id);}, 1000);   
};   
          
//in weekview, inside cell, on double click, a popup needs to be opened..   
tdElem.ondblclick = function() {   
  if (iTimeoutId) {   
    window.clearTimeout(iTimeoutId);     
  }   
  schedForm.action = "fullAddViewPers";   
  schedForm.submit();   
};  

JQUERY CODE

$(document).ready(function() {
  $(tdElem).bind("click", function(e) {
    openPopup('div_quickAddSchedule',340, e); setCellID(this.id);
  });
  $(tdElem).bind("dblclick", function(){
    schedForm.action = "fullAddViewPers"; schedForm.submit();
  });
});

I tried this code. Again it's working fine with Mozilla firefox and not in IE7/IE8.

MOZILLA Firefox browser
The only difference is when I use the setTimeout(in old code) the popup never shows. In new code (with jquery) the popup shows and closes (which is ok).