Three.js - Selected/Deselected object

Question

In my three.js scene I can add and edit objects. I recently added a DAT.GUI folder in which I can edit the objects color. But when there isn't any SELECTED object, I'm hidding it with jQuery:

function onDocumentMouseDown(event){
    event.preventDefault();
    mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
    mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
    raycaster.setFromCamera(mouse, camera);
    var intersects = raycaster.intersectObjects(objects);
    if(intersects.length > 0){
        SELECTED = intersects[ 0 ].object;

        control.attach(SELECTED);
        scene.add(control);
        $(guiObject.domElement).attr("hidden", false);
    } else{
        control.detach(SELECTED);
        scene.remove(control);
        control.update();
        $(guiObject.domElement).attr("hidden", true);
    }
}

But the problem is that when I'm clicking on that button it disappears because I wanted the object to be DESELECTED if the user clicks somewhere else than on the object.

What could be the solution?

Answer 1

Thanks to Falk, the problem is solved.

I had to change my function to this:

function onDocumentMouseDown(event){
    event.preventDefault();
    if($(event.target).is('canvas')){
        mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
        mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
        raycaster.setFromCamera(mouse, camera);
        var intersects = raycaster.intersectObjects(objects);
        if(intersects.length > 0){
            SELECTED = intersects[ 0 ].object;

            control.attach(SELECTED);
            scene.add(control);
            $(guiObject.domElement).attr("hidden", false);
            // SELECTED.material.color.setHex( Math.random() * 0xffffff );
        } else{
            control.detach(SELECTED);
            scene.remove(control);
            control.update();
            $(guiObject.domElement).attr("hidden", true);
        }
    } else{
        $(guiObject.domElement).attr("hidden", false);
    }
}