Question

如何访问事件的目标，例如点击，形成代码？我有：

var eh = new EventHandler(); 和

eh.on('click', function(obj) {
                rc.setOptions(
                {
                    inTransition: true,
                    outTransition: false
                });
                var surfaceProps = obj.origin.getProperties();

作为sample app的一部分。在代码管道中的函数中创建的曲面单击事件到此eh事件处理程序为;

surf.pipe(eh);

但是，点击次数无法按预期运行。在JS控制台中，它会出现以下错误：

TypeError: undefined is not an object (evaluating 'obj.origin.getProperties')

Answer 1

在示例应用中，他们指的是从Scrollview中的选择内部发布到EventHandler的自定义事件。您引用的文章是在Famo.us的早期版本中编写的。

下面的代码段将显示如何使用'click'作为自定义事件来完成此操作。可能不是最佳实践，因为它是鼠标单击事件的事件（MouseEvent）。我会在生产应用程序中将其重命名为其他内容。

＆＃13;

define('main', function(require, exports, module) {
  var Engine = require('famous/core/Engine');
  var OptionsManager = require('famous/core/OptionsManager');
  var Surface = require('famous/core/Surface');
  var Modifier = require('famous/core/Modifier');
  var EventHandler = require('famous/core/EventHandler');
  var StateModifier = require('famous/modifiers/StateModifier');
  var RenderNode = require('famous/core/RenderNode');
  var View = require('famous/core/View');
  var Transform = require('famous/core/Transform');
  var SequentialLayout = require("famous/views/SequentialLayout");

  var mainContext = Engine.createContext();
  var sequentialLayout = new SequentialLayout();
  var surfaces = [];
  sequentialLayout.sequenceFrom(surfaces);

  var eh = new EventHandler();
  eh.on('click', function(obj) {
    console.log('obj event', obj.event);
    var surfaceProps = obj.origin.getProperties();
    console.log('obj properties', JSON.stringify(surfaceProps));
  });

  function _eventHandler(e) {
    console.log('event', e, this);
    var surfaceProps = this.getProperties();
    console.log('surfaceProps', surfaceProps);
    this.setContent(JSON.stringify(surfaceProps));

    eh.emit('click', {
      event: e,
      origin: this
    });
  };

  var numberofItems = 10;
  var itemHeight = 45;
  var itemWidth = 20;
  for (var i = 0; i < numberofItems; i++) {
    var surface = new Surface({
      properties: {
        backgroundColor: "hsl(" + (i * 360 / 120) + ", 100%, 50%)",
      }
    });
    surface._mod = new StateModifier({
      size: [itemWidth, itemHeight], // <- Changed the width here!!!
      origin: [0.5, 0],
      align: [0.5, 0],
      proportions: [i + 1, 1]
    });
    var view = new RenderNode();
    view.add(surface._mod).add(surface);
    view._surface = surface;
    surfaces.push(view);

    //surface.pipe(eh);
    surface.on('click', _eventHandler);

  }

  mainContext.add(sequentialLayout);

  Engine.on('click', function(e) {
    for (var i = 0; i < surfaces.length; i++) {
      var random = Math.random() * surfaces.length + itemWidth;
      surfaces[i]._surface._mod.setProportions([random, 1], {
        duration: 1000
      });
    }
  });

});

require(['main']);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://requirejs.org/docs/release/2.1.16/minified/require.js"></script>
<script src="http://code.famo.us/lib/requestAnimationFrame.js"></script>
<script src="http://code.famo.us/lib/classList.js"></script>
<script src="http://code.famo.us/lib/functionPrototypeBind.js"></script>

<link rel="stylesheet" type="text/css" href="http://code.famo.us/famous/0.3.5/famous.css" />

<script src="http://code.famo.us/famous/0.3.5/famous.min.js"></script>



<div class="test-container">
  <div id="famous-app"></div>
</div>

＆＃13;

Answer 2

如果我正确理解您的问题，此功能刚刚落在最新版本中：
Add the famous source object to forwarded events

现在你可以这样做：

eh.on('click', function(event) {
  var famousSurface = event.target;
  var domElement = famousSurface._currentTarget;
});

访问famo.us中的事件目标

2 个答案: