如何将事件和其他参数传递给点击处理程序

嘿，我有一个使用easelJS构建一个画布。在我的画布，我有一个点击处理程序对他们使用下面的语法定义要点：如何将事件和其他参数传递给点击处理程序

p.on("click", handleMouseClickEvent);

现在我想参数传递到处理程序handleMouseClickEvent，我知道，我得到的事件对象但是当我尝试传递一个参数时，让我说我写：

p.on("click", handleMouseClickEvent(arg1));

然后事件对象是未定义的，根本无法访问。如何使用上述语法传递事件对象和更多参数。

p.on("click", handleMouseClickEvent(arg1,arg2,...,argN));

来源

2016-08-28 Brk

你想传递什么论据？例如，它们是特定于应用程序的全局状态，还是它们特定于被单击的元素？ – Adam

只是为了将更具体的情况下的答案投入混合。我相信这个问题是参考这个codepen：http://codepen.io/Barak/pen/AXZxKN

从架构的角度来看，注入参数到处理程序是一个你不需要的解决方法。而是使用event target访问点击/交互的内容，并确定所需的值。

对于您的示例，您正在查找用于在图形中绘制点的原始数据属性。您可以将这些属性注入到显示对象中，为原始数据对象注入一个引用，或者创建一个查找表来将显示对象与其相关的数据点相关联。

for (...) { 
    var point = data[i]; 
    var dot = new createjs.Shape(); 
    dot.x = point.x * GRAPH_WIDTH; 

    // Inject property or reference 
    dot.point = point; 

    // Create lookup 
    lookupTable[i] = dot; 
}

然后，当您单击该对象时，查找数据。

dot.on("click", function(event) { 
    var dot = event.target; 

    // Use reference 
    var point = dot.point; 

    // Or use lookup 
    var index = lookup.indexOf(dot); 

    //...do stuff with it 
}

有很多其他的方法来创建这种关系，这些都只是一些建议。创建包装函数将工作，但恕我直言，它不是一个长期或更大的应用程序的好方法。你完全可以继续使用你的方法，因为它似乎在为你工作 - 但我想提供一些思考的食物。

干杯。

来源

2016-08-30 15:48:12 Lanny

由于您没有自己调用处理程序函数（浏览器正在为您完成），因此您无需指定处理程序的更多参数。你会得到的是事件对象。

但是，由于JavaScript的变量范围是如何工作的，所以您不必这样做。功能有自己的外部访问的变量，所以你可以简单地访问变量，而无需经过他们明确：

var foo = "bar"; 

var handleMouseClickEvent = function(e) { 
    console.log(e.type); // 'click' 
    console.log(foo); // 'bar' 
}; 

p.on("click", handleMouseClickEvent);

来源

2016-08-28 15:46:14 Graham

你可以试试这个：

p.on("click", null, {arg1: "abc", arg2: "xyz"},handleMouseClickEvent); 

//And in your function, you can get the event data like this 

function handleMouseClickEvent() 
{ 
    alert(event.data.arg1); 
    alert(event.data.arg2); 
}

据官方documenatation，on接受参数如下：

。对（事件[，选择器] [，数据]，处理程序）

个事件类型：String

一个或多个空格分隔的事件类型和可选的命名空间，如 “点击”或“keydown.myPlugin”。

选择类型：String

选择器串来过滤>>>触发事件的选定元素的后代。如果选择符为空或省略，则当事件到达选定元素时触发事件始终为。

数据类型：任何

数据传递到处理程序event.data当触发事件。

处理类型：Function（事件的EventObject [，任何 extraParameter] [，...]）

的一种功能，当事件触发执行。值false也可以作为简单返回false的函数的简写。

欲了解更多信息，请参阅JQuery Documentation of on() event Handler

来源

2016-08-28 15:48:17

请注意，如果您使用JQuery，此特定方法将起作用，但问题在于引用了EaselJS对象。 CreateJS'on'方法不支持数据参数：http://createjs.com/docs/easeljs/classes/DisplayObject。HTML＃method_on – Lanny

当使用jQuery，拉维的回答也许是最好的办法。我会尝试提供另一个视角来解决你的问题。

通过使用

p.on("click", handleMouseClickEvent(arg1));

你不传递功能的事件处理程序时，您执行它，并通过它的返回值作为事件处理程序。或许你已经指出了答案，对吧？尝试这样定义事件处理程序：

function handleMouseClickEvent(arg1)) { 
    return function reallyHandleMouseClickEvent(event) { 
     // all variables available here: arg1, event 
    } 
}

当然，只要你想，你可以添加许多ARGN参数。

来源

2016-08-28 15:53:34 jirka

这应该处理它。您可以添加更多参数。

(function(arg1, arg2) { 
    p.on("click", function(event) { handleMouseClickEvent(event, arg1, arg2) }) 
})(arg1, arg2);

来源

2016-08-28 15:57:25

您需要定义事件处理程序，试试这个：

function handleMouseClickEvent(arg1)) { 
    return function doSomething(event) { 
     //logic here 
    } 
}

来源

2016-08-28 16:09:46 Jamie

的参数可以绑定到一个处理函数与Function.prototype.bind

p.on("click", handleEventWithArg.bind(this,arg1)); 

function handleEventWithArg(arg1, event) { 
    console.log(arg1); 
    console.log(event); 
});

的.bind方法返回一个新functon浏览器可以用事件对象调用。

来源

2016-08-28 17:06:36 georgeawg

如何将事件和其他参数传递给点击处理程序

回答

相关问题