0

我最近开始接触 javascript，但在理解上遇到了一些障碍。以下可能特定于 Kinetic.js，我不确定。无论如何，最好用一个例子来展示。 http://jsfiddle.net/Y6Eww/1/ 

  var stage = new Kinetic.Stage({
    container: 'container',
    width: 578,
    height: 200
  });
  var layer = new Kinetic.Layer();

  var circle = new Kinetic.Circle({
    x: stage.getWidth() / 2,
    y: stage.getHeight() / 2 + 10,
    id: "TheCircle",
    radius: 70,
    fill: 'red',
    stroke: 'black',
    strokeWidth: 4,
    draggable: true
  });

  var dragendHandler = function dragendHandler() {
    console.log(this);
  };
  var dragstartHandlerParams = function dragstartHandlerParams(param1) {
    console.log(this+param1);
  };

  circle.on('click', function() {
    console.log(this);
  });
  circle.on('dragend', dragendHandler);
  circle.on('dragstart', dragstartHandlerParams("ROCK"));

  layer.add(circle);
  stage.add(layer);


  document.getElementById('removeClick').addEventListener('click', function() {
    circle.off('click');
    alert('onclick removed');
  }, false);

引用 jsfiddle，我执行以下操作：

  1. 按下运行按钮
  2. 拖动圆圈（触发 dragstart 和 dragend）
  3. 点击圆圈

这将导致以下控制台输出：

[object Window]ROCK => Occurs after step 1.
Uncaught TypeError: Cannot call method 'call' of undefined kinetic-v4.6.0.min.js:2 => Occurs after step 2.
Kinetic.Circle {} => Occurs after step 2.
Kinetic.Circle {} => Occurs after step 3.

所以我的问题是：

  1. 为什么[object Window]ROCK最初运行 jsfiddle 时会输出到控制台？dragstart 没有发生，所以这不应该是原因。dragstartHandlerParams并且dragendHandler都是监听拖动事件的函数表达式，所以我希望它们的行为相同（在这一点上，它似乎没有dragendHandler被执行。）
  2. 为什么 和 之间的上下文会发生this变化？dragstartHandlerParamsdragendHandler
  3. 为什么dragstartHandlerParams不能作为处理程序工作？请注意，如果我在调用时省略了参数，它确实有效。
  4. 如果问题 3 的答案是“因为它需要一个事件参数”，我如何将数据传递给事件处理程序？据我了解， Kinetic.js#on函数不会像 jQuery#on函数那样传递数据。

在此先感谢您的帮助。

4

1 回答 1

1

问题是以下dragstartHandlerParams立即调用并将其return值（undefined在本例中为 ）传递给circle.on().

circle.on('dragstart', dragstartHandlerParams("ROCK"));

要指定参数而不调用函数，您可以使用.bind().

circle.on('dragstart', dragstartHandlerParams.bind(circle, "ROCK"));

或者，您可以修改dragstartHandlerParams以返回一个新function的以传递给circle.on()已关闭的参数。

var dragstartHandlerParams = function dragstartHandlerParams(param1) {
  return function () {
    console.log(this+param1);
  };
};
于 2013-08-22T08:47:27.520 回答