Для создания вторичного курсора на JavaScript вы можете использовать HTML элемент и изменять его позицию в зависимости от положения основного курсора при нажатии правой кнопки мыши. Вот пример:
```html
<!DOCTYPE html>
<html>
<head>
<style>
#main-cursor {
position: absolute;
}
#secondary-cursor {
position: absolute;
}
</style>
</head>
<body>
<div id="main-cursor">Основной курсор</div>
<div id="secondary-cursor">Вторичный курсор</div>
<script>
let mainCursor = document.getElementById('main-cursor');
let secondaryCursor = document.getElementById('secondary-cursor');
window.addEventListener('mousemove', function(event) {
mainCursor.style.left = event.clientX + 'px';
mainCursor.style.top = event.clientY + 'px';
if (event.button === 2) { // Правая кнопка мыши нажата
secondaryCursor.style.left = event.clientX + 'px';
secondaryCursor.style.top = event.clientY + 'px';
}
});
</script>
</body>
</html>
```
В этом примере мы используем два `<div>` элемента, один для основного курсора и второй для вторичного курсора. При каждом движении мыши, мы изменяем положение основного курсора в соответствии с положением мыши. Если правая кнопка мыши нажата, мы также изменяем положение вторичного курсора в соответствии с положением мыши.
Чтобы изменить поведение основного курсора при нажатии левой кнопки мыши, вы можете добавить обработчик события на клик левой кнопкой мыши и поменять позиции курсоров местами, например, так:
```javascript
window.addEventListener('click', function(event) {
if (event.button === 0) { // Левая кнопка мыши нажата
let tempLeft = mainCursor.style.left;
let tempTop = mainCursor.style.top;
mainCursor.style.left = secondaryCursor.style.left;
mainCursor.style.top = secondaryCursor.style.top;
secondaryCursor.style.left = tempLeft;
secondaryCursor.style.top = tempTop;
}
});
```
Теперь, при клике левой кнопкой мыши, позиции основного и вторичного курсоров поменяются местами.