javascript - 网站中的所有页面链接以打开聊天窗口

Question

我有一个客户希望他的所有页面链接在 html 主页中，即当点击任何菜单、主页、所有内容时，打开聊天支持框。正常的href应该像这个示例那样做，但是主页上有几十个链接，他不想手动删除每个链接而只用一个代码来做，这样他可以随时简单地删除它。

<a href="javascript:jivo_api.open();">Open the chat</a>

单击链接时我需要打开聊天的链接示例：

<li class="list-link"> <a href="tyres/index.html"> <i class="tyres ico"></i> anvelope <i class="wlf wlf-arrow-right arrow-link"></i> </a> </li>

标签： javascripthtmlhref

Answer 1

正常的href应该像这个样本

您显示的代码未使用普通hrefs。它使用了 25 多年前的技术，是我们在有任何 API 标准或关注可访问性之前处理点击的方式。

首先，不要仅将超链接用作 JavaScript 事件挂钩。网页上的任何可见元素都支持click事件，但超链接表示导航。那些依赖辅助技术（如屏幕阅读器）的人在使用超链接时可能会在导航您的网站时遇到问题，但在导航时则不会。相反，只需使用另一个内联元素（如span）并将其提供给您的click事件处理程序。

其次，javascript:....不需要，因为您将把 JavaScript 与 HTML 分开（也称为“关注点分离”）。

现在，回答你的问题。如果您只是简单地提供任何/所有在单击公共 CSS 类时应该打开聊天窗口的元素，那么您可以创建非常简单的代码来查找所有元素，循环遍历它们，并为它们分配所有相同的事件处理程序，这将打开聊天。这是一个例子：

// Get all the elements that have the "chat" class and put into an array
let chatElements = Array.prototype.slice.call(document.querySelectorAll(".chat"));

// Loop over the array
chatElements.forEach(function(item){
  // Assign an event handler
  item.addEventListener("click", function(){
    console.log("open chat window here");
  });
});

.chat { cursor:pointer; color:blue; }

<p class="chat">I will open the chat</p>
<p>I won't open the chat</p>
<div>I will <span class="chat">open the chat</span></div>
<h1 class="chat">I will open the chat</h1>
<h5>I won't open the chat</h5>