/    Sign up×
Community /Pin to ProfileBookmark

Help with Progressive Enhancement of onclick events

Copy linkTweet thisAlerts:
Jun 27.2013

Hello,

I am trying to add onlick events to some links on my page and I am having trouble figuring out how to add the return false so the href url is not followed. Here is my code:

[CODE]
function init() {
‘use strict’
connectLink.onclick = openConnect;
reviewsLink.onclick = openReviews;
attractionsLink.onclick = openAttractions;
aboutLInk.onclick = openAbout;
toptenLink.onclick = openTopten;
return false;
}

if (window.addEventListener) { // W3C
window.addEventListener(‘load’, init, false);
}else if (window.attachEvent) { // Older IE
window.attachEvent(‘onload’, init);
}
[/CODE]

I cant seem to figure out what I am doing wrong and where return false should go so it is functional. I do not want to use inline Javascript as I know that is not professional looking code.

to post a comment
JavaScript

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@007JulienJun 27.2013 — The [I]return false[/I] is to place in the event functions : openConnect, openReviews, openAttractions, openAbout and openTopten; to avoid the click event.
Copy linkTweet thisAlerts:
@mccoauthorJun 28.2013 — Thank you for your reply. I have updated my code making it a little more specialized for my situation but I am still having the problem of the browser following the links when they are clicked. I am also getting a new error saying "TypeError ad is null" Here is my code below if you have any ideas what could be causing the new error and ways to fix the previous error.

[CODE]
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(e) {
'use strict';

// Get the event object:
e = window.event;

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

// Close the other links if they are currently open
if (reviews.style.visibility == 'visible') {
reviews.style.visibility = 'hidden';
}else if (attractions.style.visibility == 'visible') {
attractions.style.visibility = 'hidden';
}else if (about.style.visibility == 'visible') {
about.style.visibility = 'hidden';
}else if (topten.style.visibility == 'visible') {
topten.style.visibility = '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);
U.addEvent(reviewsLink, 'click', openReviews);
U.addEvent(attractionsLink, 'click', openAttractions);
U.addEvent(aboutLink, 'click', openAbout);
U.addEvent(toptenLink, 'click', openTopten);
};
[/CODE]

  • * I have omitted some of the extra functions as they are similar to the one included.
    • Copy linkTweet thisAlerts:
    @007JulienJun 28.2013 — I do not see TypeError in the script and do not understand your U.$... but this script solve your first question
    [CODE]<body>
    <p><a href="#" id="connectLink">lien</a>
    <script type="text/javascript">
    function init() {
    'use strict'
    connectLink.onclick = function(){alert('ok');return false};

    }
    if (window.addEventListener) { // W3C
    window.addEventListener('load', init, false);
    }else if (window.attachEvent) { // Older IE
    window.attachEvent('onload', init);
    }
    </script>[/CODE]
    Copy linkTweet thisAlerts:
    @Logic_AliJun 28.2013 — 
    <i>
    </i>function openConnect(e) {
    'use strict';

    <i> </i> // Get the event object:
    <i> </i> [COLOR=#ff0000] e = window.event;[/COLOR]
    <i> </i>     [/QUOTE]
    If the function was installed using addEventListener or attachEvent, e will always contain the event object, so remove that line. Otherwise:

    [CODE]function openConnect( [B]evt[/B] )
    {
    'use strict';

    // Get the event object:
    [B]var e = evt || window.event;[/B][/CODE]
    Copy linkTweet thisAlerts:
    @mccoauthorJun 28.2013 — Hey guys I feel stupid, I accidentally made the ad id a class in the html so that was throwing the entire thing off. I went back and fixed it so it works fine now. Thanks for all your help.
    ×

    Success!

    Help @mcco spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 — BETA 5.16,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @AriseFacilitySolutions09,
    tipped: article
    amount: 1000 SATS,

    tipper: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,
    )...