Javascript 如何在第一次单击时突出显示链接；并在第二次单击时跟随它，除非在其他位置单击，然后重新初始化未高亮显示的状态？

一个人（可能使用常见的可疑Javascript）如何拥有几个（起初是非突出显示的链接）然后实现：

打开（永久）和关闭高亮显示&区分高亮显示和重定向？

• 单击一个术语使higlighting永久化（打开）
• 再次单击该术语（切换为on后）将重定向到文章
• 单击其他位置可删除照明（关闭）

---

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

切换高亮显示 我知道可以使用

.addClass（“活动”）处理此突出显示

和

.removeClass（“活动”）

，但不知道如何在添加

类（“活动”）

时包含链接和/或如何在删除该

类时禁用链接。CSS将需要（例如）
.active{background:green}

切换重定向（链接跟随）

因此，现在可以计算出
preventDefault（）在启用或禁用链接跟踪中起着核心作用；因为，正如人们在书中读到的：



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


另一种方法是使用
returnfalse


2之间的差异与传播（或
“冒泡”的
。关于
这种差异，一个人可以在
或者看看下面的答案
,
当他添加
event.stopImmediatePropagation（）时
停止此操作
冒出气泡

两者之间的区别如下：
returnfalse
本身也阻止了这种传播，而
preventDefault（）没有

最高审计机关：

函数（）{return false；}

等于：

函数（e）{e.preventDefault（）；e.stopPropagation（）；}

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


,
,
,



var-anchors=document.getElementsByTagName（'a'），
长度=锚。长度，
指数
对于（索引=0；索引<长度；索引+=1）{
锚[index].onclick=function（e）{
e、 预防默认值（）；
if（！（/\bhighlight\b/）.test（e.target.className））{
e、 target.className+=“突出显示”；
}
};
}
.blockElement{
显示：块；
浮动：左；
清除：左；
}
.亮点{
背景颜色：黄色；
}





















一个




















两个
使用锚的onclick来运行javascript函数。如果以前没有单击过，请通过更改css高亮显示它，并返回false，这样链接就不会被跟踪。如果以前单击过，则返回true，这样链接将被跟踪

为了检查链接是否已被“单击关闭”，您可以使用锚定的onblur事件。
当您单击任何链接时，将
高亮显示类添加到该链接中，并防止默认情况下在链接没有此类时停止跟踪该链接

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

当您单击其他任何位置时，请检查您是否正在单击突出显示唯一
类的位置。如果没有，请从页面上的任何现有链接中删除该类。如果要防止在突出显示其他内容时发生任何突出显示，请在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
这里是提示（感谢您的评论）-当您单击链接时，您也在单击文档。这是因为一种称为冒泡的效果——冒泡从单击的元素开始，但它会在DOM中冒泡，直到碰到窗口对象为止。我之前在代码中对其进行了修改，添加了
event.stopImmediatePropagation（）-按照tin上的说明执行-它
停止立即传播
或
冒泡

这里有一个片段：

$（文档）.ready（函数（）{
$（文档）。单击（函数（事件）{
if（！$（event.target）.hasClass（“突出显示”））{
$（“.highlight”）.removeClass（“highlight”）；
}
});
$（“a”）。每个（函数（）{
$（此）。单击（函数（事件）{
if（！$（this）.hasClass（“突出显示”））{
event.preventDefault（）；
事件。stopImmediatePropagation（）；
$（此）.addClass（“突出显示”）；
}
});
});
});
。突出显示{
背景：红色；
颜色：白色；
}
以下是一个示例，演示了您想要实现的目标的概念。链接和信息发布在原始问题下的评论中


var-anchors=document.getElementsByTagName（'a'）；
document.body.addEventListener（'click'，函数（e）{
[]forEach.call（锚定，函数（锚定）{
如果（例如，目标！==锚）{
anchor.classList.remove（'highlight'）；
anchor.classList.remove（'follow'）；
}
});
}，假）；
[]forEach.调用（锚定、函数（锚定