Jump to content
Larry Ullman's Book Forums

Return False To Suppress Clicking A Link


Recommended Posts

Larry, similar to what you do in the book for the onsubmit event, I want to do for the onmousedown event with links.

 

The problem I am having is the following:

 

I have a bunch of links that I need to assign onmousedown events to when the page loads, so I basically use a for loop to assign a function to all the events. The following is not an exact representation, but it'll do to explain what I'm talking about:

 

pageLinks = document.getElementsByTagName('a');

var loadPageContent = function () {

 // Ajax is used here to retrieve a specific page's content from the DB and is displayed in the appropriate location.

 // I also have an Ajax object set up, which I have glossed over for this example.

};

for (var i = 0; i < pageLinks.length; i++) {

 pageLinks[i].onmousedown = loadPageContent;

}

 

My original thinking was to place return false at the end of loadPageContent, but after testing it (and further thinking about it), I realized that that won't work. So now my question is, what can I do to suppress the link that is clicked on from being followed when Ajax is used?

 

Also, I refuse to write the following type of JS in the for loop, as it's just bad practice:

 

for (var i = 0; i < pageLinks.length; i++) {

 pageLinks[i].onmousedown = function () {

   loadPageContent(this);

   return false;

 };

}

 

Likewise, I refuse to use inline JS mixed with HTML, so please do not even consider those as options. There must be a reasonable solution to this problem, which I am just overlooking.

Link to comment
Share on other sites

Personally I'd use jQuery and do something like:

 

$('a').click(function(e) {

 e.preventDefault();

 $('#content').load($(this).attr('href'));

});

 

Don't know the ins and outs of best practice here as I'm not a JS developer but it works. You'd obviously have to manipulate the href value from the actual link which would be pointing to the non-JS (or non-ajax) fallback e.g. prepending ajax/

 

Quick edit - if you're loading content to the page dynamically you'll want to use:

 

$('a').live('click', function(){

});

Edited by Stuart
Link to comment
Share on other sites

Certainly, jQuery is an option here, but I'm aiming for the vanilla JS approach. Nothing personal. I just wanna figure out how to get this to work. I'll play with it some more and post results.

 

Also, Stuart, I took a look at your site, Green Shoots Design. Very inspiring. I'm trying to get something of my own going at the moment. I really like how you presented everything. That's the kind of thing I'm striving for here in Japan.

 

Thanks for the inspiration, and as always, the help.

Link to comment
Share on other sites

Problem solved.

 

Gotta use onclick instead of onmousedown. As far as I can tell, it's not possible to suppress links from being followed via onmousedown. If jQuery's preventDefault function stops onmousedown for links as well, I'm impressed. I have no clue how they do it. All the same, all is well. Thanks again, Stuart.

Link to comment
Share on other sites

Thanks for the kind words about our site unfortunately I can take very little credit... think my only contribution to that was some htacccess work! I've passed your comments onto our designer Rob Calvert. Good luck with your project over in Japan it's an exciting landscape over there - we did a lot of research for a potential client a while back into design trends and the huge adoption of QR codes/mobile usage.

Link to comment
Share on other sites

 Share

×
×
  • Create New...