图片禁止右键保存

最新推荐文章于 2023-08-31 14:18:40 发布

weixin_42291794

最新推荐文章于 2023-08-31 14:18:40 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

分类专栏：小案例文章标签： javascript css 前端

本文链接：https://blog.youkuaiyun.com/weixin_42291794/article/details/106817383

小案例专栏收录该内容

16 篇文章

订阅专栏

本文介绍了如何使用JavaScript和CSS防止用户通过右键菜单直接保存网页中的图片，保护图片版权，提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        * {
            margin: 0;
        }
        .div1 {
            border: 1px solid;
            background: #ff0;
            width: 100px;
            height: 100px;
            font-family: 'simsun';
            display: inline-block;
        }
    </style>
</head>

<body>
    <div class="div1">
        <img src="http://via.placeholder.com/100.png" alt="">
    </div>
    <script>
        let div1 = document.querySelector('.div1');
        div1.onmousedown = function (e) {
            if (e.which == 3) {// 鼠标右键
                console.log('right')
                this.oncontextmenu = function () { return false; }
            }
        }
    </script>
</body>

</html>