.test1 {
user-select: none;
}
<body>
<p class="content">
<p class="test2">111</p>
<p class="test1">222</p>
<p class="test2">333</p>
<p class="test1">444</p>
<p class="test2">555</p>
</p>
</body> We have disabled this article selection for some of the items. When selecting an item individually, the selection can indeed be disabled, and the content cannot be copied. However, if you use cmd a to select all, You will see that the disabled items are not selected on the page, but the content can be copied at this time.
[].forEach.call(document.querySelectorAll('.test1'), (node) => {
node.addEventListener('copy', (e) => {
e.stopPropagation();
e.preventDefault();
console.log(1);
return false;
}, true);
node.addEventListener('selectstart', (e) => {
e.stopPropagation();
e.preventDefault();
console.log(2);
return false;
}, true);
});I found that it still takes effect when selecting individually, but it fails when selecting all. So I would like to ask if there is any way to intersperse unselectable nodes among the selectable nodes, and also make it possible to select only the selected nodes when copying. Optional content.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
You can try another way, such as putting the text in css. Text in css cannot be selected and copied at all. I wrote a test code casually:
JsFiddle: https://jsfiddle.net/d95cugaL/
JsBin: http://jsbin.com/nowoxuceta/e...
Or go one step further and put the text directly on the image...
Here is an idea, that is, you can disable the ctrl+c mouse event.
//Disable ctrl copy
If there is a problem with selecting all, you can also disable ctrl+A