How to Disable hyperlink clicks

Hyperlinks are designed for clicking, to lead you somewhere else, but sometimes this  behavior is undesired. In my case a grid control displayed some HTML data in its cells (including hyperlinks) and clicking on those links caused some undesired effects. I still wanted to display HTML and allow clicking on other grid elements (e.g. checkboxes) just needed a way to prevent hyperlinks clicks.

Remember that events bubble? That gave me an idea to wrap the grid control in a DIV to catch click events. This way I can check event source and if it’s a hyperlink – cancel the event, otherwise allow it. Well that’s pretty much it. Here’s a stump for the DIV wrapper:

<div onclick="return checkClickSrc()">
    <!-- Controls to check go here-->
</div>

and here’s the JavaScript code that does the check:

function checkClickSrc() {
    return event.srcElement.tagName != 'A'
    //for firefox: return event.target.tagName != 'A'
}

2 replies on “How to Disable hyperlink clicks”

  1. hi my problem is that i have adot net paghe in that i have a comment box and the comment box is read only and i cannot edit or change anything but if i attach a link for example (www.google.com) is given and saved by my higher authority and i can just view his comments here its already read only is kept and i can click that link and go to that url , My point is though its set as READ ONLY it should not allow me to click the link ,
    to dissable this what should be done which should be changed
    please reply me as soon as poosible

    thank you
    vikhram vaasudevan

  2. @vikhram vaasudevan Well “Read Only” usually means you cannot modify the content, but clicking a link is allowed (and even if you disable link clicking, what prevents user from copying the link and manually pasting it into browser address bar?). That said the approach to disable link click is identical to described in the post: Just wrap the control that hold the comments into a DIV and in DIV’s onclick event check the source of the click event. If it’s an anchor “A” – return false to disable click.

Leave a Reply

Your email address will not be published. Required fields are marked *