js实现阻隔
实现 JavaScript 阻隔的方法
事件阻止默认行为
使用 event.preventDefault() 阻止元素的默认行为，例如阻止表单提交或链接跳转：
document.querySelector('a').addEventListener('click', (e) => {
e.preventDefault();
});阻止事件冒泡
通过 event.stopPropagation() 阻止事件向上级元素传播：
document.querySelector('.child').addEventListener('click', (e) => {
e.stopPropagation();
});阻止事件捕获
在事件捕获阶段调用 stopPropagation()，结合 useCapture 参数：
document.querySelector('.parent').addEventListener('click', (e) => {
e.stopPropagation();
}, true); // 第三个参数为 true 表示捕获阶段阻止右键菜单
通过阻止 contextmenu 事件的默认行为禁用右键菜单：
document.addEventListener('contextmenu', (e) => {
e.preventDefault();
});阻止文本选择
通过 CSS 结合 JavaScript 防止用户选择文本：
document.addEventListener('selectstart', (e) => {
e.preventDefault();
});CSS 辅助：
.unselectable {
user-select: none;
}阻止键盘事件
拦截特定按键操作（如 F12 或 Ctrl+Shift+I）：
document.addEventListener('keydown', (e) => {
if (e.key === 'F12' || (e.ctrlKey && e.shiftKey && e.key === 'I')) {
e.preventDefault();
}
});实际应用场景示例
表单提交拦截
在表单提交时验证数据，失败时阻止提交：
document.querySelector('form').addEventListener('submit', (e) => {
if (!validateInput()) {
e.preventDefault();
alert('验证失败');
}
});动态元素事件隔离
为动态生成的元素添加事件阻隔，避免重复触发：
document.body.addEventListener('click', (e) => {
if (e.target.matches('.dynamic-button')) {
e.stopImmediatePropagation();
handleButtonClick();
}
});注意事项
- 过度使用事件阻隔可能影响用户体验，需谨慎评估需求。
- 某些浏览器扩展可能绕过前端阻隔，关键操作需后端验证。
- 移动端需额外处理
touchstart等触摸事件。
