javascript - 从透明菜单中选择三个js对象

Question

我有一个用 Three js 构建的模型。对于我的用例，我从构建模型中选择一个组件并捕获该组件的 uuid。然后我需要单击菜单中的按钮才能查看详细信息。菜单以脚本形式插入到页面中。当我单击该按钮时，它会选择位于其后面的建筑物组件。因此，我无法访问我之前选择的数据。

例如，在上图中，我有 Buttons1-3。在使用按钮之前，我选择建筑模型的一个组件。然后，当我单击任何按钮时，鼠标还会选择其后面的建筑组件，例如 Button1 后面的窗口、Button2 后面的墙壁等。因此，我无法访问之前选择的组件的 uuid 。我怎样才能防止这个？代码如下:

    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>' 
    '';
};

Answer 1

好的，在您的代码中您已经设置了菜单按钮的 z-index。尝试设置菜单面板的 z-index，以便容器位于菜单下方。代码中的菜单和容器位于同一级别，这就是为什么两者都监听单击事件。