Drop down menu not work

问题

I'm developing an easy web application, and I'm using two js libraries: dat.gui and three.js.

My problem is the drop down menu is locked. I can't open it.

// 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') { ... }
            }
        );
};

Reading on the web, it seems to be a known issue, but in some examples, I see the drop down menus working well. I'm new to js, and I thought "maybe there is some scoping issue", so I put the initialization process inside a function that does the work. But the problem remains.

I'm working on Ubuntu/Chrome and Ubuntu/Firefox. You could check the entire code here, where I use check boxes instead of a drop down menu.

回答1:

I face the same problem. In my code, I have changed:

var controls = new THREE.OrbitControls(camera);

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

回答2:

I face the same problem. In my code, I listen the mouse click event. and the callback function like that:

function onDocumentMouseDown( event ) {
    event.preventDefault();

    ... //other code
}

I found out that the problem is "event.preventDefault();", that will prevent clicking on the drop down list, so by commenting it, my problems solved. you can also check other functions which related with mouse click event.

回答3:

Making sure preventDefault is only called for mouseEvents from the drawing canvas solved the issue for me (in the Context of Three.js and using OrbitControls and a raycaster for selecting on mouseclick)

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

来源：https://stackoverflow.com/questions/22896144/drop-down-menu-not-work

标签

javascript

three.js

dat.gui