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

Question

我有三个j的建筑模型。对于我的用例，我从构建模型中选择一个组件并捕获组件的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，使容器位于菜单下方。代码中的菜单和容器与为什么都会监听click事件处于同一级别。