?
Solved

Prevent onClick event handler from executing

Posted on 2012-09-18
11
Medium Priority
?
607 Views
Last Modified: 2013-11-19
The jQuery event.stopPropagation() and/or event.preventDefault() -- can these be used to stop an onClick="xyz();" on a <button> or <td> ?? I don't want the xyz() function to run AT ALL. Does anybody know how to do this? Nothing I try prevents the xyz() itself from running.

Setup:

<td onClick="javascript:xyz();">123</td>

Thanks.

Paragram
0
Comment
Question by:paragram
  • 6
  • 5
11 Comments
 
LVL 83

Accepted Solution

by:
leakim971 earned 2000 total points
ID: 38411770
>can these be used to stop an onClick="xyz();" on a <button> or <td> ??
No

>I don't want the xyz() function to run AT ALL.
What about (inside $(document).ready block) :
$("td").attr("onclick", null);

Open in new window

?
0
 

Author Comment

by:paragram
ID: 38412640
leakim --

By George, this seems to work! Thank you.

I know it wasn't part of the original question, but can you now tell me, how do I turn the onClick behavior back on once I've nulled it? (I will "Accept" your solution, but could you help me with this additional issue, please?)

Thanks.

Paragram
0
 
LVL 83

Expert Comment

by:leakim971
ID: 38413210
Did you try :

backup = $("td").attr("onclick");
$("td").attr("onclick", null);

so later :

$("td").attr("onclick", backup);

this work for only one... I let you compose your code for multiple backup...
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:paragram
ID: 38413567
No, that DOESN'T work. In fact, since I know the handler I want is xyz(), if what you suggested had worked, I guess it would have been better to just do

$("td").attr("onclick",xyz);

which I what I tried before my previous post (i.e., after I tested your solution to my original issue and saw that it worked.) But the "restore" DOESN'T work!

So I'll give you the points ;-) but I need to figure out how to turn it back on. There must be a different syntax for assigning the handler?

(On the next go-round I'll assign the points, but please keep up with this thread until we get this solved? Thanks!)

Paragram
0
 
LVL 83

Expert Comment

by:leakim971
ID: 38413575
$("td").attr("onclick", "javascript:xyz()");
0
 

Author Closing Comment

by:paragram
ID: 38413737
That syntax for restoring the handler doesn't work either.
0
 
LVL 83

Expert Comment

by:leakim971
ID: 38414114
0
 

Author Comment

by:paragram
ID: 38415755
It turned out that the document type declaration was part of the problem.

Once I put in <!DOCTYPE html> at the top, your "attr onclick null" and "attr onclick xyz" started working. (For anyone else reading this: go back up and look at leak's previous suggestions. They probably ALL work (!) if you get the DOCTYPE in there!)

Thank you for all the help

Paragram
0
 

Author Comment

by:paragram
ID: 38426644
leakim971:

Can I have another bite at the apple here? (If not, I'll post this to a new thread).

It turns out that there were 2 problems with the solution. One seems to involve dynamic controls. But instead of chasing that down, I realize there's a bigger issue. That is, to turn the handlers back on, I need some very complex arguments that I just don't have a way of keeping (dependent on the actual <td> being processed.)

Maybe there's a way to deal with that, but instead I tried simply event.stopPropagation(), since there was a child <td> that sees the click event before the <td> I'm concerned with.

And, that approach works great to stop processing the click. But now the important Question: is there a way to REENABLE the ORIGINAL handler?

The situation is a <td> inside of a <td> The outer <td> has the handler I want, which is turned off by running stopPropagation on the inner <td>. So, how do I STOP the stopPropagation() so the outer <td>'s handler can see the click?

Thanks again.

Paragram
0
 
LVL 83

Expert Comment

by:leakim971
ID: 38428307
if you need to enable and stop a process/code, maybe you can use a flag instead playing directly with events.

function handlerXYZ() {
     if(flagXYZ) {
           // run code
     }
}

so to disable, just use :
flagXYZ = false;
to reenable :
flagXYZ = true;
0
 

Author Comment

by:paragram
ID: 38430520
Ah, would it were so! Anyway, I found a (?) solution at stackoverflow. But first of all, I can't just modify the handler because it is inside a dll and I can't get to it. These menus are an add on.

But someone showed me a simple technique:

$('td.myclass').off('click');

This neatly turns off the previous handler, which was stopPropagation()

!! But naturally, there's still a problem, only it looks like a side effect that is impacting some partial postback logic elsewhere on the page. For some reason, executing the off('click') is causing multiple postbacks. Pretty weird. (Just having a simple test setup with buttons to disable and enable the menu worked great -- see my post on stackoverflow.

http://stackoverflow.com/questions/12559183/confusion-regarding-event-bubbling-and-stoppropagation-and-then-permitting-bubbling
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
Each password manager has its own problems in dealing with certain websites and their login methods. In Part 1, I review the Top 5 Password Managers that I've found to be the best. In Part 2 we'll look at which ones co-exist together and why it'…
The viewer will learn how to count occurrences of each item in an array.
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.
Suggested Courses

621 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question