Jump to content
Larry Ullman's Book Forums

Trouble Preventing Event Submission


Recommended Posts

I have read through the book and am attempting to use some of the information for a site I am working on. Sticking with progressive enhancement I have kept the urls in the href attribute and added ids to each of my links. My problem is that when I click the link it is following that link instead of the javascript. Here is my code if you could please help me figure out what the problem is.

 
var connectLink = U.$('connectLink');

var reviewsLink = U.$('reviewsLink');

var attractionsLink = U.$('attractionsLink');

var aboutLink = U.$('aboutLink');

var toptenLink = U.$('toptenLink');

 

var content = U.$('content');

var ad = U.$('ad');

var connect = U.$('connect');

var reviews = U.$('reviews');

var attractions = U.$('attractions');

var about = U.$('about');

var topten = U.$('topten');
 
function openConnect() {

        'use strict';

        

        // Get the event object:

        if (typeof e == 'undefined') e = window.event;

        

        U.$('close').onclick = closeContent;

        

        // Close the other links if they are currently open

        if (reviews.style.visibility == "visible") {

            reviews.style.visiblity = 'hidden';

        }else if  (attractions.style.visibility == "visible") {

            attractions.style.visiblity = 'hidden';

        }else if  (about.style.visibility == "visible") {

            about.style.visiblity = 'hidden';

        }else if  (topten.style.visibility == "visible") {

            topten.style.visiblity = 'hidden';

        }

        

        // Open the connect div

        content.style.visibility = 'visible';

        connect.style.visiblity = 'visible';

        ad.style.display = 'block';

        connectLink.onclick = null;

        

        // Prevent the form's submission:

        if (e.preventDefault) {

            e.preventDefault();

        } else {

            e.returnValue = false;

        }

        return false;

    } // End of openConnect() function
 
window.onload = function() {

        'use strict';

        

        U.addEvent(connectLink), 'click', openConnect);

    };
Link to comment
Share on other sites

It looks like you have a syntax error with the following line:

U.addEvent(connectLink), 'click', openConnect);

Get rid of the right parenthesis after connectLink, and hopefully it'll work.

I recommend using the console in Chrome, or Firebug in Firefox to debug these sorts of problems.

You can quickly pull up the console in Chrome by pressing Ctrl + Alt + J.

 

Please let us know if that solves the problem.

Link to comment
Share on other sites

I made the changes but the link is still followed. I have firebug but it will not give me information on this error as when I click the link to see what if there is an error it goes to the new page and firebug clears the content because a new page as been loaded.

Link to comment
Share on other sites

I don't see an obvious JavaScript error, but I know what you mean about how the browser gets to the next page before you see the error (because the JavaScript that interrupts that process is not executed due to its error). One simple way of preventing that here is to remove the HREF value on the connectLink so that the browser won't go anywhere.

Link to comment
Share on other sites

I tried removing the href for testing purposes and firebug is giving me an error saying that "e is undefined" which doesnt make sense to me as I thought thats what was happening with this line

 

 

if (typeof e == 'undefined') e = window.event;
Link to comment
Share on other sites

If you're getting an error saying that e is undefined, then you can at least rest assured that your links aren't being followed now, right?

Also, e is undefined because you didn't add an e parameter to your openConnect function header. Please edit the function header as follows:

function openConnect(e) {

In other words, add the e.

Link to comment
Share on other sites

 Share

×
×
  • Create New...