Drop down menu not work

Question

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.

For what it is worth, your code works for me on OSX/Chrome and OSX/Safari. — WestLangley, Apr 06 '14 at 18:41
I'm on Ubuntu/Chrome. I tried my code on Ubuntu/Firefox and the drop down menu remains locked. — optimusfrenk, Apr 06 '14 at 20:05
are you using THREE.js? I was using orbit controls and commented out `event.preventDefault();` in the function onMouseDown. Problem solved. — Jared, Dec 04 '14 at 17:40

score 1 · Answer 1 · answered Dec 06 '18 at 10:42

1

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

var controls = new THREE.OrbitControls(camera);

to

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

answered Dec 06 '18 at 10:42

Andrej

679
5
14

score 0 · Answer 2 · answered Jan 18 '16 at 15:58

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.

score 0 · Answer 3 · answered Aug 14 '19 at 13:26

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();

Drop down menu not work

3 Answers3

Linked