How can I highlight a link on first click; and follow it on second click, unless clicked elsewhere, then reinitialize non-highlighted state?

Question

How can one (probably using the usual suspect Javascript), have a few (at first non-highlighted links) and then achieve:

Toggle on (make permanent) and off highlighting & differentiate between highlighting and redirect?

• Clicking on a term makes higlighting permanent (toggle on).
• Clicking again (after toggle on) on that term redirects to article.
• Clicking elsewhere removes higlighting (toggle off).

---

EDIT (to clarify, after question had been put on hold):

Toggle highlighting

I understand this highlighting can be handled using .addClass("active"); and .removeClass("active");, but have no clue on how to include the links when the Class("active") is added and/or how to disable the links when that Class is removed. CSS would then need (e.g.) .active{background:green}

Toggle redirect (link follow)

• So, it is now figured out preventDefault(); plays a central role in enabling or disabling link following; since, as one can read in its entry in the jQuery-api:

• If this method is called, the default action of the event will not be triggered.
• For example, clicked anchors will not take the browser to a new URL.

• Another way to do this might be using return false;.

The difference between the 2 has to do with propagating (or "bubbling up") the DOM. About this difference, one can read at CSS-tricks or have a look at the answer below by somethinghere, when he adds event.stopImmediatePropagation(); to stop this bubbling up

The difference between the two is the following: return false; also prevents this propagation by itself, whereas preventDefault(); doesn't.

The CSS-tricks-article sais:

function() {return false;}

Is equal to:

function(e) {e.preventDefault(); e.stopPropagation();}

More literature about the difference can be found on StackExchange, which might feature some duplicate posts?

• What's the difference between e.preventDefault(); and return false?,
• event.preventDefault() vs. return false,
• event.preventDefault() vs. return false (no jQuery),
• Difference - "e.preventDefault();" and "return false;".

var anchors = document.getElementsByTagName('a'),
    length = anchors.length,
    index;

for (index = 0; index < length; index += 1) {
    anchors[index].onclick = function (e) {
        e.preventDefault();
        if (!(/\bhighlight\b/).test(e.target.className)) {
            e.target.className += ' highlight';
        }
    };
}

.blockElement {
    display:block;
    float: left;
    clear: left;
}
.highlight {
    background-color: yellow;
}

<a href="#one" class="blockElement">Jump to One</a>
<a href="#two" class="blockElement">Jump to Two</a>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<div id="one">One</div>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<div id="two">Two</div>

Answer 1

Here is an example that demonstrates the concept of what you want to achieve. Links and information were posted in comments under the original question.

var anchors = document.getElementsByTagName('a');

document.body.addEventListener('click', function (e) {
    [].forEach.call(anchors, function (anchor) {
        if (e.target !== anchor) {
            anchor.classList.remove('highlight');
            anchor.classList.remove('follow');
        }
    });
}, false);

[].forEach.call(anchors, function (anchor) {
    anchor.addEventListener('click', (function (e) {
        var clicked = false;

        return function (e) {
            if (!clicked) {
                e.preventDefault();
                e.target.classList.add('highlight');
                clicked = true;
            } else {
                clicked = e.target.classList.contains('highlight');
                if (clicked) {
                    e.target.classList.add('follow');
                    e.target.classList.remove('highlight');
                } else {
                    e.preventDefault();
                    e.target.classList.add('highlight')
                    clicked = true;
                }
            }
        };
    }()), false);
});

body {
    position:absolute;
    top:0;
    bottom:0;
    right:0;
    left:0;
}
html {
    height:100%;
}
.blockElement {
    display:block;
    float: left;
    clear: left;
}
.highlight {
    background-color: yellow;
}
.follow {
    background-color: red;
}

<a href="#one" class="blockElement">Jump to One</a>
<a href="#two" class="blockElement">Jump to Two</a>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<div id="one">One</div>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<div id="two">Two</div>

Answer 2

When you click any link, add the highlight class to it and prevent default to stop following the link if it did not have this class..

/* Take each "a" in your DOM and apply a click handler. */
$("a").click(function(event){
    /* Check if the highlight class is already applied. */
    if(!$(this).hasClass("highlight")){
        /* If not, use preventDefault to stop following the link. */
        event.preventDefault();
        /* Also stop the event from bubbling up to the document as a click. */
        event.stopImmediatePropagation();
        /* Then apply it. */
        $(this).addClass("highlight");
    }
});

When you click anywhere else, check if you are clicking the one with he unique highlighted class. If you aren't, remove the class from any existing link on the page. If you want to prevent any highlighting from happening as something else is highlighted, use a preventDefault() in the if statement. Answer uses jQuery, but it could be done in just javascript.

$(document).click(function(event){
    /* Check if the clicked target has the highlighted class. */
    if(!$(event.target).hasClass("highlight")){
        /* If not, remove the class from any element on the page. */
        $(".highlight").removeClass("highlight");
    }
});

Update

I initially used a global variable to store the current clicked on, but that is unnecessary unless you want to highlight multiple. In that case, make a global variable and use the jQuery add() function to add it to the highlighted.

Update 2

I have shortened the code a bit, cleaned it up. Also, you will have to wrap the whole thing in a $(document).ready(function(){}) as otherwise you will have to add it to the end of your page (as there are no a elements initialised yet).

Update 3

Heres the kicker (thanks for the comments) - when you click on a link you are also clicking on the document. This is because of an effect called Bubbling - the bubble starts at the element thats clicked but it bubbles up the DOM until it hits the window object. I have amended it in the code before, adding event.stopImmediatePropagation(); - which does what it says on the tin - it stops immediate propagation or bubbling.

Heres a snippet:

$(document).ready(function(){
  $(document).click(function(event){
    if(!$(event.target).hasClass("highlight")){
      $(".highlight").removeClass("highlight");
    }
  });
  $("a").each(function(){
    $(this).click(function(event){
      if(!$(this).hasClass("highlight")){
        event.preventDefault();
        event.stopImmediatePropagation();
        $(this).addClass("highlight");
      }
    });
  });
});

.highlight { 
  background: red; 
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<a href="http://www.stackoverflow.com">Stack Overflow Highlighting</a>

Answer 3

Use an anchor's onclick to run a javascript function. If it hasn't been clicked before, highlight it by changing the css, and return false so the link isn't followed. If it has been clicked before, return true, so the link is followed.

For checking if the link has been 'clicked off of', you may be able to user an onblur event for the anchor.