为什么在 javascript 中无法识别 mousedown 事件（使用三个）？答案

【问题标题】：Why is the mousedown event not recognized in javascript (with THREE)?为什么在 javascript 中无法识别 mousedown 事件（使用三个）？
【发布时间】：2015-11-19 22:23:33
【问题描述】：

我有一个简单的THREE.js，我想单击圆形对象，但是当我单击浏览器中的任何位置时，什么也没有发生。我关注this suggestion 没有成功。 完整的代码在这里：

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Test</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
        <style>
            body {
                color: #808080;
                font-family:Monospace;
                font-size:13px;
                text-align:center;

                background-color: #ffffff;
                margin: 0px;
                overflow: hidden;
            }

            #info {
                position: absolute;
                top: 0px; width: 100%;
                padding: 5px;
            }

            a {

                color: #0080ff;
            }

        </style>
    </head>
    <body>

        <div id="container"></div>
        <script src="js/build/three.min.js"></script>

        <script>

            var container, stats;
            var camera, scene, renderer;
            var group1;
            var mouseX = 0, mouseY = 0;
            var map_width = 512;
            var map_height = 512; 

            var windowHalfX = window.innerWidth / 2;
            var windowHalfY = window.innerHeight / 2;

            init();
            animate();

            function createMesh(filename) {           
                var geometry = new THREE.SphereGeometry( 70, 40, 40 );
                geometry.addEventListener('onclick',  onDocumentMouseDown);
                var loader = new THREE.TextureLoader();
                var texture = loader.load(filename);
                var material = new THREE.MeshBasicMaterial( { map: texture, overdraw: 0.5 } );
                var mesh = new THREE.Mesh( geometry, material );
                return mesh;
            }


            function init() {
                container = document.getElementById( 'container' );
                camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 2000 );
                camera.position.z = 500;
                scene = new THREE.Scene();

                group1 = new THREE.Group();    
                var mesh = createMesh("textures/canvas1.png");
                group1.add( mesh );
                scene.add( group1 );                

                renderer = new THREE.WebGLRenderer({ alpha: true });
                renderer.setClearColor( 0xffffff, 0 );
                renderer.setPixelRatio( window.devicePixelRatio );
                renderer.setSize( window.innerWidth, window.innerHeight );
                container.appendChild( renderer.domElement );

                document.addEventListener( 'onclick',  onDocumentMouseDown, false);

            }

            function onDocumentMouseDown( event) {
                //event.preventDefault();
                console.log("test");
                window.alert("clicked");
            }

            function animate() {
                requestAnimationFrame( animate );
                render();
            }

            function render() {             
                camera.lookAt( scene.position );                  
                renderer.render( scene, camera );
            }


        </script>

    </body>
</html>

要重现此示例，您只需要一些随机图像和THREE.js 库。在单击浏览器期间，我既没有看到控制台中的任何错误（与此问题相关），也没有看到任何其他控制台输出...

我尝试按照文档 (geometry.addEventListener) 中的描述将方法添加到 THREE.js 对象之一，但这也没有任何作用。

【问题讨论】：

标签： javascript html three.js

【解决方案1】：

document.addEventListener( 'click',  onDocumentMouseDown, false);

【讨论】：

谢谢你的作品！但我检查了似乎不包含解决方案的文档：w3schools.com/jsref/dom_obj_event.asp
这是错误的文档吗？如果是这样，为什么？在哪里可以找到“真实”事件的列表...？
onclick - 是你应该放在 DOM 中的事件名称。例如 <button onclick="someFunction();">Press Me</button> 。在 Javascript 中，它只是 click.