Selecting Three js object from transparent menu

I have a building model in Three js. For my use case, I select a component from the building model and capture the uuid of the component. Then I need to click a button from the menu to see detailed information. Menu is inserted to the page in scripts. When I click the button it selects the component of building which stays behind it. Therefore, I cannot access the data which I selected before.

In the above picture for example, I have Buttons1-3. Before going to buttons, I select one component of building model. Then when I click any of the button, mouse also selects the building component behind it such as window behind Button1, wall behind Button2, etc. Therefore, I cannot access the uuid of component which I selected before. How can I prevent this?? Following is the code:

    JA.addMenu = function () {

    JA.menu = JA.container.appendChild( document.createElement( 'div' ) );
    JA.menu.id = 'movable';
    JA.menu.title = 'Move the menu around or click here to close the menu';
    JA.menu.addEventListener( 'mousedown', JA.mouseMove, false );
    JA.menu.innerHTML = '<a id=closerIcon href=JavaScript:JA.toggleMenu(); ><p><i class="fa fa-bars"></i></p></a>' +
        '<p>' +
            '<a href="" title=' + JA.TitleText2 + '>' + JA.TitleText1 + '' + JA.TitleText1 + '</a> ' +
        '</p>' +
        '<hr>' +
    '';
    window.addEventListener( 'mouseup', JA.mouseUp, false);

};

JA.Button1Tab = function () {

    var tab = JA.menu.appendChild( document.createElement( 'div' ) );
    tab.title = 'Button1';
    tab.innerHTML =
        '<a href=# onclick=JA.toggleDialogs(JA.aboutDialog); ><p class=button >' +
            '<i class="fa fa-share-alt"></i> Button1' +
        '</p></a>';
    JA.aboutDialog = JA.container.appendChild( document.createElement( 'div' ) );
    JA.aboutDialog.style.cssText = 'display: none; background-color: #ccc; left: 50px; opacity: 0.9; padding: 20px; ' +
        'bottom: 0; left: 0; height: 370px; margin: auto; position: absolute; right: 0; top: 0; width: 500px; z-index:10; ';
    JA.aboutDialog.innerHTML =
        '<h3>' + document.title + ' ' + JA.titleIcon + '</h3>' +
        +'<h4>Menu explains the following:</h4>' 
    '';
};

Answers


Ok so, in your code you have set the z-index of the menu buttons. Try setting the z-index of the menu panel so the container will be below the menu. The menu and the container in your code are on the same level thats why both listen the click event.


Need Your Help

After WCAG 2.0, Should we follow any guideline of WCAG 1.0?

xhtml accessibility w3c screen-readers wcag

WCAG 2.0 is released should we follow only WCAG 2.0 guideline or we should combination of both no need to consider WCAG 1.0 now?

Does ValideAntiForgeryToken prevent falsifying of POST parameters?

c# asp.net-mvc security

I somewhat understand how [ValidateAntiForgeryToken] prevents CSRF and I have read through this question, but I'm unsure whether this would prevent someone from falsifying the parameters for a form...