How to control (disable/enable) all onclick events

[john_woo]

Hi,

I need to implement API by which all onclick envets in same document
can be in flexible control (disable/enable on demand).

I tried the followings:

1. overwrite onclick function:
if (window.captureEvents){
window.captureEvents(Event.CLICK);
window.onclick=myfunction;
}
else{
document.captureEvents(Event.CLICK);
document.onclick=myfunction;
}

document.addEventListener("click", myfunction, true); //or
document.attachEvent("click", myfunction);

2. then in myfunction:
if (event.stopPropagation) event.stopPropagation();
else event.cancelBubble = true; //or
if (event.preventDefault) event.preventDefault();
else event.returnValue = false;

However, the above can only overwrite default behavior, can't be
applied to those buttons which are associated with specific functions/
handlers;

Then traversing through document tree to find out and overwrite those
functions. This leads to big problem - when enabling onclick events,
those specific handling functions gone!

I'm wondering, what is the right way to design/implement such API?

Thanks,

 

[Thomas 'PointedEars' Lahn]

I need to implement API by which all onclick envets in same document
can be in flexible control (disable/enable on demand).

I tried the followings:

1. overwrite onclick function:
if (window.captureEvents){
window.captureEvents(Event.CLICK);
window.onclick=myfunction;
}
else{
document.captureEvents(Event.CLICK);
document.onclick=myfunction;
}

I wonder how old the tutorial has been where you read that nonsense.

document.addEventListener("click", myfunction, true); //or
document.attachEvent("click", myfunction);

The two calls are _not_ remotely equivalent (who told you to pass `true'
for the third argument anyway?):

2. then in myfunction:
if (event.stopPropagation) event.stopPropagation();
else event.cancelBubble = true; //or
if (event.preventDefault) event.preventDefault();
else event.returnValue = false;

It is one thing to prevent the default action for an event,
another to stop its propagation in the document tree.

However, the above can only overwrite default behavior,

No, preventDefault() or `returnValue' can prevent the default action, and
stopPropagation() or `cancelBubble' prevent the propagation of the event in
the document tree. However, stopPropagation() is _not_ equivalent to
`cancelBubble'; the latter can only prevent upwards propagation (event
bubbling).

can't be applied to those buttons which are associated with specific
functions/handlers;

Event listeners are associated with (added to) elements, not vice-versa.

Then traversing through document tree to find out and overwrite those
functions. This leads to big problem - when enabling onclick events,
those specific handling functions gone!

You cannot overwrite event listeners. You can remove them, but you
need a reference to them first, and AFAIK it cannot be retrieved without
a user-defined event registry.

I'm wondering, what is the right way to design/implement such API?

Do not do this. What do you think you need it for anyway?


PointedEars

 

[Jorge]

(...)
I'm wondering, what is the right way to design/implement such API?

There's no way... that's why people overlay a div on top of the page:
to mimic a modal dialog (and to capture -and stop the propagation- of
clicks).

 

[wilq]

There's no way... that's why people overlay a div on top of the page:
to mimic a modal dialog (and to capture -and stop the propagation- of
clicks).

Adding an overlay should fix your problem as Jorge pointed out... Have
you tried that?

 

[Asen Bozhilov]

Adding an overlay should fix your problem as Jorge pointed out... Have
you tried that?

How can you stop access keys with overlay? And i can't understand, why
OP want to do this?

function clickHandler()
{
if (someSpecialCase)
{
return;
}

//do something
};

He can check for special case in execution context created when
invokes handler function.

 

[wilq]

How can you stop access keys with overlay? And i can't understand, why
OP want to do this?

function clickHandler()
{
  if (someSpecialCase)
  {
    return;
  }

  //do something

};

He can check for special case in execution context created when
invokes handler function.

Didnt he asked to stop onclick, not key events ? As he pointed out, he
figured out already checking a special case and this didnt work in his
case?

 

[matt.snider]

Hi,

I need to implement API by which all onclick envets in same document
can be in flexible control (disable/enable on demand).

I tried the followings:

1. overwrite onclick function:
        if (window.captureEvents){
                window.captureEvents(Event.CLICK);
                window.onclick=myfunction;
        }
        else{
                document.captureEvents(Event.CLICK);
                document.onclick=myfunction;
        }

      document.addEventListener("click", myfunction, true); //or
      document.attachEvent("click", myfunction);

2. then in myfunction:
      if (event.stopPropagation) event.stopPropagation();
      else event.cancelBubble = true;    //or
      if (event.preventDefault) event.preventDefault();
      else event.returnValue = false;

However, the above can only overwrite default behavior, can't be
applied to those buttons which are associated with specific functions/
handlers;

Then traversing through document tree to find out and overwrite those
functions. This leads to big problem - when enabling onclick events,
those specific handling functions gone!

I'm wondering, what is the right way to design/implement such API?

Thanks,

I'm not sure if you found a solution, but there are ways to do this.
If you use a framework like YUI to attach all your events, the
framework will keep a collection of all events, which you can fetch
and then turn them each off. Alternatively, you could do something
simpler by wrapping your event handlers in another function that knows
to check for a specific toggle parameters:

var activateClickHandlers = true;

var myClickHandlerWrapper = function(fx) {
return function() {
if (activateClickHanlders) {
fx.apply(this, arguments);
}
else {
return false;
}
};
};

and when you attach a click event, you would use:

myelement.onclick = myClickHandlerWrapper(function(e) {
// your function
});

now if you set 'activateClickHandlers' to false, then the wrapper
function will return false to all your onclick handlers. Otherwise,
the callbacks will behave normally.

-matt