Question

我做了一个简单的three.js测试，将鼠标悬停事件添加到画布，但是当我尝试删除此事件侦听器时，它不起作用。这是我的代码，当我点击上面的按钮时，应启用鼠标悬停控制台输出鼠标位置，当我再次单击该按钮时，应禁用鼠标事件。但是控制台仍然会输出鼠标位置。

<!DOCTYPE HTML>
<html ng-app="Mainapp">
  <head>
  </head>
  <body ng-controller="Main">
                <button class="btn btn-danger"  ng-click="cropImage()">
                        CropImage
                </button>

    <div id="container"></div>
    <script src="http://www.html5canvastutorials.com/libraries/three.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
    <script defer="defer">

var angularT3 = angular.module('Mainapp', []);

angularT3.run(['$rootScope', '$location','$http', '$window', function ($rootScope, $location, $http, $window) {
    //$http.defaults.headers.post['x-csrf-token'] = $cookies['XSRF_TOKEN'];
       var canv = document.createElement('canvas');
       canv.id = 'snapshot';
       canv.width = window.innerWidth;
       canv.height = window.innerHeight;       
       document.body.appendChild(canv);

}]);

angularT3.controller('Main', function ($scope,$http) {


    $scope.enabled = false;
    $scope.cropImage = function (){
        var world = document.getElementById('world');
        $scope.enabled = !$scope.enabled;
        if($scope.enabled){
            console.log('crop image enabled');
            world.addEventListener('mousemove', getMousePos , false);

       }else{
           console.log('not enabled ');
            world.removeEventListener('mousemove', getMousePos,false);
       }
        function getMousePos( evt) {
            var rect = world.getBoundingClientRect();
            var pos = {
              x: evt.clientX - rect.left,
              y: evt.clientY - rect.top
            };
            console.log( 'Mouse position: ' + pos.x + ',' + pos.y );
            return pos;
        }
    }

});


      init = function(){

          // revolutions per second
          var angularSpeed = 0.2; 
          var lastTime = 0;

          // this function is executed on each animation frame
          function animate(){
            // update
            var time = (new Date()).getTime();
            var timeDiff = time - lastTime;
            var angleChange = angularSpeed * timeDiff * 2 * Math.PI / 1000;
            cube.rotation.y += angleChange;
            lastTime = time;

            // render
            renderer.render(scene, camera);

            // request new frame
            requestAnimationFrame(function(){
                animate();
            });
          }

          // renderer
          var renderer = new THREE.WebGLRenderer();
          renderer.setSize(window.innerWidth, window.innerHeight);
          renderer.domElement.id = 'world';      
          document.body.appendChild(renderer.domElement);

          // camera
          var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
          camera.position.z = 500;

          // scene
          var scene = new THREE.Scene();

          // cube
          var cube = new THREE.Mesh(new THREE.CubeGeometry(200, 200, 200), new THREE.MeshNormalMaterial());
          cube.overdraw = true;
          scene.add(cube);
          animate();  
      } 

    init();    
    </script>
  </body>
</html>

无法在画布上删除鼠标eventlistener

0 个答案: