preventDefault.ts 1.2 KB

12345678910111213141516171819202122232425262728
  1. import { useEventListener } from "@vueuse/core";
  2. /** 是否为`img`标签 */
  3. function isImgElement(element) {
  4. return typeof HTMLImageElement !== "undefined"
  5. ? element instanceof HTMLImageElement
  6. : element.tagName.toLowerCase() === "img";
  7. }
  8. // 在 src/main.ts 引入并调用即可 import { addPreventDefault } from "@/utils/preventDefault"; addPreventDefault();
  9. export const addPreventDefault = () => {
  10. // 阻止通过键盘F12快捷键打开浏览器开发者工具面板
  11. useEventListener(
  12. window.document,
  13. "keydown",
  14. ev => ev.key === "F12" && ev.preventDefault()
  15. );
  16. // 阻止浏览器默认的右键菜单弹出(不会影响自定义右键事件)
  17. useEventListener(window.document, "contextmenu", ev => ev.preventDefault());
  18. // 阻止页面元素选中
  19. useEventListener(window.document, "selectstart", ev => ev.preventDefault());
  20. // 浏览器中图片通常默认是可拖动的,并且可以在新标签页或窗口中打开,或者将其拖动到其他应用程序中,此处将其禁用,使其默认不可拖动
  21. useEventListener(
  22. window.document,
  23. "dragstart",
  24. ev => isImgElement(ev?.target) && ev.preventDefault()
  25. );
  26. };