The Ultimate Proxy Cursor

HTML

<div id="custom-cursor">
        <svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor">
            <path d="M7 2l12 11.2l-5.8 0.5l3.3 6.5l-3 1.4l-3.4-6.6l-3.1 3.2z"/>
        </svg>
    </div>

    <div id="context-menu">
        <div class="menu-item" onclick="alert('Action 1')">Copy from Proxy</div>
        <div class="menu-item" onclick="alert('Action 2')">Search via Proxy</div>
        <div class="menu-item" onclick="location.reload()">Reset Interaction</div>
    </div>

    <div class="container">
        <h1>Absolute Proxy Isolation</h1>
        <div class="controls">
            <button id="btn-a" onclick="alert('SUCCESS: Button A clicked by RED CURSOR')">Button A</button>
            <button id="btn-b" onclick="document.body.style.backgroundColor='#d1e7dd'">Green Theme</button>
        </div>

        <div class="text-content" id="proxy-text">
            YOUR REAL MOUSE CANNOT CLICK THESE BUTTONS. 
            If you click directly on "Button A" with your hand-cursor, nothing will happen. 
            You must push the RED CURSOR onto the button and then click. 
            The same applies to this text: to highlight it
            hold your click and push the red cursor across these characters.
        </div>
    </div>

CSS

:root {
            --cursor-color: #ff0000;
        }

        html, body {
            height: 100%;
            margin: 0;
            padding: 40px;
            font-family: 'Segoe UI', Tahoma, sans-serif;
            background-color: #f0f2f5;
            /* Real mouse is the Hand icon */
            cursor: pointer; 
            overflow: hidden;
            /* Completely disable native selection UI */
            user-select: none; 
            -webkit-user-select: none;
        }

        #custom-cursor {
            width: 25px;
            height: 25px;
            position: fixed;
            top: 0;
            left: 0;
            pointer-events: none; 
            z-index: 10000;
            color: var(--cursor-color);
            filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.3));
        }

        .container {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            padding: 40px;
            border-radius: 20px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        }

        .text-content {
            font-size: 20px;
            line-height: 1.6;
            color: #333;
            margin: 25px 0;
            /* Allow selection markers to exist, but we drive them */
            user-select: text; 
        }

        ::selection {
            background: rgba(255, 0, 0, 0.3);
            color: black;
        }

        .controls {
            display: flex;
            gap: 15px;
        }

        button {
            padding: 15px 30px;
            background: #007bff;
            color: white;
            border: none;
            border-radius: 10px;
            font-weight: bold;
            font-size: 16px;
        }

        button:active {
            background: #0056b3;
        }

        /* Custom Context Menu */
        #context-menu {
            position: fixed;
            display: none;
           ...

JavaScript

const proxy = document.getElementById('custom-cursor');
        const menu = document.getElementById('context-menu');
        let pPos = { x: 250, y: 250 };
        let isRealMouseDown = false;
        let startRange = null;

        function updateProxyPosition() {
            proxy.style.transform = `translate(${pPos.x}px, ${pPos.y}px)`;
        }
        updateProxyPosition();

        // 1. THE ULTIMATE BLOCKER
        // This stops the real mouse from interacting with anything directly.
        ['mousedown', 'mouseup', 'click', 'contextmenu'].forEach(evtType => {
            window.addEventListener(evtType, (e) => {
                if (e.isTrusted) {
                    e.preventDefault();
                    e.stopImmediatePropagation();
                    
                    // Route to our proxy logic
                    handleTrustedInput(e);
                }
            }, true);
        });

        // 2. PROXY INPUT LOGIC
        function handleTrustedInput(e) {
            if (e.type === 'mousedown' && e.button === 0) {
                isRealMouseDown = true;
                menu.style.display = 'none';
                // Find selection start at red cursor tip
                startRange = document.caretRangeFromPoint(pPos.x, pPos.y);
                window.getSelection().removeAllRanges();
            }

            if (e.type === 'mouseup' && e.button === 0) {
                isRealMouseDown = false;
                // Trigger a synthetic click at proxy location
                const target = document.elementFromPoint(pPos.x, pPos.y);
                if (target) {
                    const proxyClick = new MouseEvent('click', {
                        bubbles: true,
                        cancelable: true,
                        view: window,
                        clientX: pPos.x,
                        clientY: pPos.y
                    });
                   ...