如何在第一次点击时突出显示链接；并在第二次点击时跟随它，除非在其他地方点击，然后重新初始化非突出显示状态？

Question

一个人（可能使用通常的嫌疑人Javascript）怎么能有几个（起初没有突出显示的链接）然后实现：

打开（永久）和关闭突出显示并区分突出显示和重定向？

• 点击一个词使高亮显示永久（打开）。
• 再次点击（打开后）该词会重定向到文章。
• 点击其他地方会移除高亮显示（关闭）。

---

编辑（澄清，在问题被搁置后）：

切换突出显示

我知道可以使用 .addClass("active"); 和 .removeClass("active"); 处理此突出显示，但不知道如何在添加 Class("active") 时包含链接和/或在添加 Class 时如何禁用链接删除。 CSS 然后需要（例如）.active{background:green}

切换重定向（链接跟随）

• 所以，现在发现preventDefault(); 在启用或禁用链接跟踪方面起着核心作用；因为，正如人们在its entry in the jQuery-api 中看到的那样：

• 如果调用此方法，则不会触发事件的默认动作。
• 例如，单击的锚点不会将浏览器带到新的 URL。

• 另一种方法是使用return false;。

两者之间的区别与传播（或 “冒泡”） DOM。关于 这种差异，可以阅读 CSS-tricks 或者看看下面的答案 somethinghere, 当他添加event.stopImmediatePropagation(); 来阻止这个 冒泡

两者之间的区别如下：return false; 本身也可以防止这种传播，而preventDefault(); 不会。

CSS-tricks-articlesais：

function() {return false;}

等于：

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

更多关于差异的文献可以在 StackExchange 上找到，其中可能包含一些重复的帖子？

• 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

这是一个示例，展示了您想要实现的概念。链接和信息已在原始问题下的 cmets 中发布。

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

当您单击任何链接时，将highlight 类添加到其中，并防止默认停止跟踪该链接，如果它没有此类..

/* 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");
    }
});

当您单击其他任何位置时，请检查您是否单击了具有唯一 highlighted 类的那个。如果不是，请从页面上的任何现有链接中删除该课程。如果要防止在突出显示其他内容时发生任何突出显示，请在 if 语句中使用 preventDefault()。 Answer 使用 jQuery，但也可以只用 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");
    }
});

更新

我最初使用一个全局变量来存储当前单击的，但除非您想突出显示多个，否则这是不必要的。在这种情况下，创建一个全局变量并使用 jQuery add() 函数将其添加到突出显示。

更新 2

我已经稍微缩短了代码，清理了它。此外，您必须将整个内容包装在 $(document).ready(function(){}) 中，否则您必须将其添加到页面末尾（因为尚未初始化 a 元素）。

更新 3

这是踢球者（感谢 cmets） - 当您点击链接时，您也点击了文档。这是因为一个叫做冒泡的效果 - 气泡从被点击的元素开始，但它会冒泡 DOM，直到它碰到窗口对象。我之前在代码中对其进行了修改，添加了event.stopImmediatePropagation(); - 就像它在锡上所说的那样 - 它是stops immediate propagation 或bubbling。

这是一个 sn-p：

$(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

使用锚点的 onclick 来运行 javascript 函数。如果之前没有点击过，通过更改 css 突出显示它，并返回 false 以便不跟随链接。如果之前被点击过，则返回true，因此链接被点击。

为了检查链接是否被“点击关闭”，您可以为锚点使用 onblur 事件。