前言
在前端开发中，常常需要对页面中的链接进行拦截，以便在用户点击链接时进行一些额外的处理，比如进行跳转前的数据验证等。而最近在项目中使用了 @mapbox/link-hijacker 这个 npm 包，发现非常好用，于是写篇文章分享给大家。
link-hijacker 是什么
@mapbox/link-hijacker 是一个非常简单易用的链接拦截库，它可以拦截任意类型的链接，包括 a 标签的链接、JavaScript 跳转、window.open 等操作。
其核心 API 是 hijackLinks(callback) ，即对链接进行拦截并指定一个回调函数，以便在用户点击链接时进行处理。
安装
安装 @mapbox/link-hijacker 只需要简单的一行命令：
npm install @mapbox/link-hijacker --save
使用
使用 @mapbox/link-hijacker 的步骤非常简单。首先在 js 文件中导入包：
import { hijackLinks } from '@mapbox/link-hijacker';然后定义一个回调函数来处理链接点击事件：
const handleClick = (href, event) => {
// 处理代码 ...
};最后在页面加载完成后调用 hijackLinks，并将回调函数作为参数传入：
window.onload = () => {
hijackLinks(handleClick);
};这样就完成了拦截页面中所有链接的操作。
回调函数
回调函数的参数包括两个变量：href 和 event。其中 href 变量是当前链接的地址，而 event 变量则是链接被点击时的事件对象。
const handleClick = (href, event) => {
console.log('链接地址为：', href);
console.log('点击事件对象：', event);
};示例代码
以下是拦截页面中所有链接并进行 log 打印的示例代码。
-- -------------------- ---- -------
------ - ----------- - ---- ------------------------
----- ----------- - ------ ------ -- -
--------------------- ------
---------------------- -------
--
------------- - -- -- -
-------------------------
--总结
通过这篇文章，我们了解了 @mapbox/link-hijacker 这个 npm 包的使用方法，并实现了一个简单的点击事件处理。在实际开发过程中，可以根据具体业务需要对回调函数进行定制，加上更丰富的逻辑判断和代码处理等操作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f2ac3983b0ab45f74a8bb09