Untitled

<html>
<head>
    <style>

        #child0 {
            position: absolute;
            left: 50px;
            top: 50px;
        }

        #child1 {
            position: absolute;
            left: 150px;
            top: 150px;
        }
    </style>

</head>

<body>

<div id="parent">

    <div id="child0">
        this is content in the child
    </div>


    <div id="child1">
        this is content in a second child.
    </div>

</div>

<script>

    let target = document.querySelector('html');

    // parent.addEventListener('mouseover',() => {
    //     event.preventDefault();
    // });

    parent.addEventListener('mousemove',(event) => {

        // if the selection is active... and the target is NOT a child div then
        // cancel the mouse operation.

        const range = window.getSelection().getRangeAt(0);

        if (event.target.parentElement.id !== 'parent') {

            if (! range.collapsed) {
                event.preventDefault();
            }

        }

    });

</script>


</body>
</html>