JS实现屏蔽网页右键复制及ctrl+c复制的方法【2种方法】

JS实现屏蔽网页右键复制及Ctrl+C复制的方法有两种，分别是使用JavaScript事件取消默认行为和使用CSS样式禁用右键菜单显示。下面我将一步步为你详细讲解，并提供两个示例说明。

方法一：使用JavaScript取消默认行为

步骤一：添加事件监听器

首先，我们在需要屏蔽复制的页面上添加事件监听器，通过addEventListener方法来监听contextmenu和keydown事件，实现禁用右键菜单和Ctrl+C复制功能。

document.addEventListener('contextmenu', function(event) {
    event.preventDefault();
});
document.addEventListener('keydown', function(event) {
    if (event.ctrlKey && (event.keyCode === 67 || event.keyCode === 86)) {
        event.preventDefault();
    }
});

步骤二：取消默认行为

在事件触发时，我们通过event.preventDefault()方法来取消默认行为，从而实现屏蔽复制功能。

示例一

<!DOCTYPE html>
<html>
<head>
    <title>屏蔽复制示例一</title>
</head>
<body>
    <p>这是一段文本。</p>
    <script>
        document.addEventListener('contextmenu', function(event) {
            event.preventDefault();
        });
        document.addEventListener('keydown', function(event) {
            if (event.ctrlKey && (event.keyCode === 67 || event.keyCode === 86)) {
                event.preventDefault();
            }
        });
    </script>
</body>
</html>

在上面的示例中，我们添加了两个事件监听器，并在事件触发时通过preventDefault()方法来取消默认行为，禁用右键菜单和Ctrl+C复制功能。

方法二：使用CSS样式禁用右键菜单显示

步骤一：添加CSS样式

我们可以使用CSS样式来禁用右键菜单显示，为需要屏蔽复制的元素设置-webkit-touch-callout: none;属性即可。

.no-copy {
  -webkit-touch-callout: none;
}

步骤二：应用CSS样式

通过JavaScript代码，我们可以获取所有需要屏蔽复制的元素，并将其添加no-copy类。

var noCopyElems = document.querySelectorAll('.no-copy');
for (var i = 0; i < noCopyElems.length; i++) {
    noCopyElems[i].classList.add('no-copy');
}

示例二

<!DOCTYPE html>
<html>
<head>
    <title>屏蔽复制示例二</title>
    <style>
        .no-copy {
          -webkit-touch-callout: none;
        }
    </style>
</head>
<body>
    <p>这是一段可以被复制的文本。</p>
    <p class="no-copy">这是一段被禁止复制的文本。</p>
    <script>
        var noCopyElems = document.querySelectorAll('.no-copy');
        for (var i = 0; i < noCopyElems.length; i++) {
            noCopyElems[i].classList.add('no-copy');
        }
    </script>
</body>
</html>

在上面的示例中，我们通过CSS样式-webkit-touch-callout: none;来禁用右键菜单显示，然后通过JavaScript代码获取所有需要屏蔽复制的元素，并将其添加no-copy类。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JS实现屏蔽网页右键复制及ctrl+c复制的方法【2种方法】 - Python技术站