前言
在日常的前端开发中，我们经常会用到事件绑定和事件监听。但是有些场景下，我们需要对事件进行特殊处理，比如点击事件的默认行为并不是我们所期望的，这时就需要使用 preventDefault 方法来阻止默认行为。但是这种处理方式比较麻烦，每次都要写一大段代码来实现。而现在，我们可以使用 npm 包 wrap-prevent-default 来解决这个问题。
wrap-prevent-default 简介
wrap-prevent-default 是一款基于原生 JavaScript 开发的 npm 包，用于统一处理点击事件的默认行为。
该包只有一个方法，就是 wrapPreventDefault，它的作用是返回一个经过处理后的函数，该函数会先调用 preventDefault 方法，再调用原函数。使用 wrapPreventDefault 来处理点击事件时，只需要给事件监听函数传入需要执行的函数，而无需再去手动调用 preventDefault 方法。
wrapPreventDefault 方法的使用
在使用 npm 包 wrap-prevent-default 时，需要先安装包。在终端中输入以下命令：
npm install wrap-prevent-default --save
安装完成后，在需要使用该包的文件中，通过 require() 方法引入该包。
const wrapPreventDefault = require('wrap-prevent-default');通过 wrapPreventDefault 方法，我们可以获取一个新的事件监听函数，该函数在执行传入的原函数前，会先调用 preventDefault 方法。下面是一个例子：
const btn = document.getElementById('btn');
const handleClick = wrapPreventDefault(() => {
console.log('点击事件被触发！');
});
btn.addEventListener('click', handleClick);在上面的代码中，我们使用 wrapPreventDefault 包裹了一个函数，该函数在被触发时会打印一句话。使用 wrapPreventDefault 后，即使该函数中没有调用 preventDefault 方法，点击事件的默认行为也会被阻止。
wrapPreventDefault 方法的进阶使用
除了可以使用 wrapPreventDefault 方法来处理点击事件的默认行为外，我们也可以通过自定义配置项，来处理自定义的默认行为。
const handleClick = wrapPreventDefault(() => {
console.log('点击事件被触发！');
}, {default: 'disabled', keys: ['button', 'target']});在上面的代码中，我们通过 wrapPreventDefault 方法的第二个参数来自定义了默认行为。如果事件的默认行为为 'disabled'，则会把事件源元素的 disabled 属性设置为 true；如果事件的默认行为为其他值，则不进行任何处理。自定义默认行为的 keys 属性值是一个数组，包含了需要监听的属性名，当这些属性值与自定义默认行为相同时，该默认行为会被执行。
总结
npm 包 wrap-prevent-default 是一款方便且实用的事件处理包。它可以统一处理点击事件的默认行为，让我们的代码更加简洁，也让事件处理更加方便。在使用 wrapPreventDefault 时，需要了解自定义配置项，以便更加灵活地处理事件的默认行为。如果你在日常开发中遇到了类似的问题，不妨试试 npm 包 wrap-prevent-default。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671178dd3466f61ffe6db