下拉菜单不起作用

Posted 2023-05-07

【中文标题】下拉菜单不起作用

【英文标题】：Drop down menu not work

【发布时间】：2014-04-06 15:39:55

【问题描述】：

我正在开发一个简单的 Web 应用程序，我正在使用两个 js 库：dat.gui 和 three.js。

我的问题是下拉菜单被锁定。打不开。

// gui initialization (dat.gui)
function initGui() 

    var Options = function() 
        this.tenda = 'bar';
    ;

    config = new Options();
    var gui = new dat.GUI();
    var subGui = gui.addFolder('Setting');
    subGui.open();

    // callbacks
    subGui.add( config, 'tenda', ['bar', 'pie', 'area']).
        onChange(
            function() 
                if (config.tenda === 'bar')  ... 
                else if (config.tenda === 'pie')  ... 
                else if (config.tenda === 'area')  ... 
            
        );
;

在网上阅读，这似乎是一个已知问题，但在某些示例中，我发现下拉菜单运行良好。我是 js 新手，我认为“可能存在一些范围问题”，所以我将初始化过程放在一个可以完成工作的函数中。但问题依然存在。

我正在开发 Ubuntu/Chrome 和 Ubuntu/Firefox。你可以检查整个代码here，我在这里使用复选框而不是下拉菜单。

【问题讨论】：

不管怎样，你的代码在 OSX/Chrome 和 OSX/Safari 上都适用于我。

我在 Ubuntu/Chrome 上。我在 Ubuntu/Firefox 上尝试了我的代码，下拉菜单仍然锁定。

这适用于我在 Windows8.1/Chrome 中

这有什么更新吗？在 Chrome 38.0.2125.122 中体验它

你在使用 THREE.js 吗？我正在使用轨道控制并在函数 onMouseDown 中注释掉 event.preventDefault();。问题解决了。

【参考方案1】：

我面临同样的问题。在我的代码中，我已更改：

var controls = new THREE.OrbitControls(camera);

到

var controls = new THREE.OrbitControls(camera, renderer.domElement);

【参考方案2】：

我面临同样的问题。在我的代码中，我监听鼠标点击事件。和这样的回调函数：

function onDocumentMouseDown( event ) 
    event.preventDefault();

    ... //other code

我发现问题是“event.preventDefault();”，这将阻止点击下拉列表，所以通过评论它，我的问题解决了。您还可以查看与鼠标点击事件相关的其他功能。

【参考方案3】：

确保仅从绘图画布中为 mouseEvents 调用 preventDefault 为我解决了这个问题（在 Three.js 的上下文中，并使用 OrbitControls 和 raycaster 进行鼠标点击选择）

function onDocumentMouseDown(event) 
  // https://***.com/a/11562933/1497139
  var target = event.target || event.srcElement;
  var tag = target.tagName;
  if (tag!='CANVAS')
    return;
  event.preventDefault();