Events 著名的重叠表面-事件触发

我定义了两个ImageSurface-s，一个稍微重叠另一个。现在，当我单击第一个曲面时，我的事件未注册。我怎样才能解决这个问题。我尝试了z-index属性，但它不起作用

编辑

我使用参考教程-音色作为我的出发点。在my PageView.js中，我有：

     define(function(require, exports, module) {
        var View            = require('famous/core/View');
        var Surface         = require('famous/core/Surface');
        var Transform       = require('famous/core/Transform');
        var StateModifier   = require('famous/modifiers/StateModifier');
        var Modifier   = require('famous/core/Modifier');
        var HeaderFooter    = require('famous/views/HeaderFooterLayout');
        var ImageSurface    = require('famous/surfaces/ImageSurface');
        var EventHandler    = require('famous/core/EventHandler');
        var Transitionable  = require('famous/transitions/Transitionable');
        var Easing  = require('famous/transitions/Easing');
        var TransitionableTransform = require("famous/transitions/TransitionableTransform");
        var TweenTransition = require('famous/transitions/TweenTransition');
            TweenTransition.registerCurve('inElastic', Easing.inElastic);

        var SpringTransition = require("famous/transitions/SpringTransition");

        console.log(SpringTransition);

        function PageView() {
            View.apply(this, arguments);

            _createBacking.call(this);
            _createLayout.call(this);
            _createHeader.call(this);
            _createBody.call(this);
             _createMapPin.call(this);
            _createCenterCircle.call(this);
            _createCityState.call(this);
            _createFb.call(this);
            _createTw.call(this);

            _setListeners.call(this);

        }

        PageView.prototype = Object.create(View.prototype);
        PageView.prototype.constructor = PageView;

        PageView.DEFAULT_OPTIONS = {
            headerSize: 80

        };

        function _createBacking() {

            this.add(backing);

            var backing = new Surface({
                size: [undefined, undefined],
                properties: {
                    backgroundColor: 'black',
                    boxShadow: '0 0 20px rgba(0,0,0,0.5)'
                }
            });

            this.add(backing);
        }

        function _createLayout() {
            this.layout = new HeaderFooter({
                headerSize: this.options.headerSize
            });

            var layoutModifier = new StateModifier({
                transform: Transform.translate(0, 0, 0.1)
            });

            this.add(layoutModifier).add(this.layout);

        }

        function _createHeader() {
            var backgroundSurface = new Surface({
                properties: {
                    backgroundColor: 'white'
                }
            });

            this.hamburgerSurface = new ImageSurface({
                size: [44, 44],
                content : 'images/hamburger.png'
            });

            var backgroundModifier = new StateModifier({
                transform : Transform.behind
            });

            var hamburgerModifier = new StateModifier({
                origin: [0, 0.5],
                align : [0, 0.5],
                transform:  Transform.translate(20, 0, 0)
            });



            this.layout.header.add(backgroundModifier).add(backgroundSurface);
            this.layout.header.add(hamburgerModifier).add(this.hamburgerSurface);

        }

      function _createBody() {
            this.bodySurface = new ImageSurface({
                 properties: {
                    size:[undefined,undefined],
                    //backgroundImage: 'url(images/background.png)',
                    //backgroundRepeat:'no-repeat',
                   // backgroundSize: 'cover',
                    border:'0',
                     backgroundColor: 'red'

                },
                content:'images/background.png'
            });

            this.layout.content.add(this.bodySurface);
        }

        function _createCenterCircle() {

            this.centerCircle = new ImageSurface({
                size : [200, 200],
                content : 'images/center-circle.png',
                properties: {
                    zIndex: 2
                },

            });

            var centerCircleModifier = new StateModifier({
                origin: [0.5,0.5],
                align:[0.5,0.5],
                transform: Transform.scale(0.8,0.8,0)

            });

            Transitionable.registerMethod('spring', SpringTransition);

            var transition = {
            method: "spring",
            period: 200,
            dampingRatio: .1,
            velocity: 0

            }

            this.centerCircle.on("click", function(){

             centerCircleModifier.setTransform(Transform.scale(1,1,1));
             centerCircleModifier.setTransform(Transform.scale(1.1,1.1,1.1),transition);

            }.bind(this));

            this.layout.content.add(centerCircleModifier).add(this.centerCircle);
        }

        function _createMapPin() {


              this.mapPin = new ImageSurface({
                size : [true, true],
                content : 'images/map-pin.png',
                properties: {
                    zIndex: 10
                }
            });

            var mapPinSizeModifier = new StateModifier({
                origin: [0.5,0.5],
                align:[0.5,0.5],
                transform: Transform.scale(0.3,0.3,0)

            });

            var mapPinPosModifier = new StateModifier({

                transform: Transform.translate(-130,-240)

            });

            this.mapPin.on('click', function() {
               console.log("map pin clicked");

            }.bind(this));

            this.layout.content.add(mapPinSizeModifier).add(mapPinPosModifier).add(this.mapPin);

        }

        function _createCityState()
        {


             this.cityState = new ImageSurface({
                size : [true, true],
                content : 'images/city-state.png',
                properties: {
                    zIndex: 8
                }
            });

               var cityStateModifier = new StateModifier({
                origin: [0.5,0.5],
                align:[0.5,0.5],
                transform: Transform.scale(0.4,0.4,0)

            });

               var cityStatePosModifier = new StateModifier({

                transform: Transform.translate(0,-480)

            });

  this.layout.content.add(cityStateModifier).add(cityStatePosModifier).add(this.cityState);
        }


        function _createFb() {

            this.fbLogo = new ImageSurface({
                size : [true, true],
                content : 'images/fb.png',
                properties: {
                    zIndex: 10
                }
            });

              var fbModifier = new StateModifier({
                origin: [0.5,0.5],
                align:[0.5,0.5],
                transform: Transform.scale(0.4,0.4,0)

            });

               var fbPosModifier = new StateModifier({

                transform: Transform.translate(-250,480)

            });

            this.layout.content.add(fbModifier).add(fbPosModifier).add(this.fbLogo);

        }


        function _createTw() {

            this.twLogo = new ImageSurface({
                size : [true, true],
                content : 'images/tw.png',
                properties: {
                    zIndex: 10
                }
            });

              var twModifier = new StateModifier({
                origin: [0.5,0.5],
                align:[0.5,0.5],
                transform: Transform.scale(0.4,0.4,0)

            });

               var twPosModifier = new StateModifier({

                transform: Transform.translate(0,480)

            });

            this.layout.content.add(twModifier).add(twPosModifier).add(this.twLogo);

        }



        function _setListeners() {
            this.hamburgerSurface.on('click', function() {
                this._eventOutput.emit('menuToggle');

            }.bind(this));

            this.bodySurface.pipe(this._eventOutput);

        }


        module.exports = PageView;
    });

---

看起来您正在将其中一个修改器Z比例设置为0。请记住，缩放标识为1，因此如果Z的比例为0，则曲面基本上不存在

以下是我需要更改的内容，以使“中心圆”可单击

var centerCircleModifier = new StateModifier({
   origin: [0.5,0.5],
   align:[0.5,0.5],
   transform: Transform.scale(0.8,0.8,1) // <- Transform scale Z from 0 to 1
});

var centerCircleModifier=新状态修饰符({
来源：[0.5,0.5]，
对齐：[0.5,0.5]，
变换：变换.比例（0.8,0.8,1）//
hamburgerSurface的类型应为var。因为这是指当前对象，但类型未定义。
您能告诉我们您有什么吗？那么您试图单击的元素中有哪些没有单击？mapPin元素，当我添加cityState元素时，我无法单击centerCircle。我的单击未注册。非常感谢您分享您的知识葛。再一次回答正确。你们一定要写一本关于美国名人的书。
this.hamburgerSurface = new ImageSurface(
{
       size: [44, 44],
       `enter code here`content : 'images/hamburger.png'
});