jQuery：如何在事件发生之前执行代码并将结果作为事件参数？

Question

我已经设置的元素，这点我可以动态地添加的：

<div id="some-id-1" data-id="1" class="some"> 
<canvas /> 
</div> 
<div id="some-id-2" data-id="2" class="some"> 
<canvas /> 
</div> 
<div id="some-id-3" data-id="3" class="some"> 
<canvas /> 
</div> 
... 

我要附加事件组特定的项目。为了实现它，我有这样的代码：

$('body') 
    .on('click', 'canvas', function (event) { 
     var idx = $(this).parents('.some').data('id'); 
     wrap[idx].action1(event); 
    }) 
    .on('mousemove mouseout', 'canvas', function() { 
     var idx = $(this).parents('.some').data('id'); 
     wrap[idx].action2(); 
    }) 
    .on('mousemove', 'canvas', function (event) { 
     var idx = $(this).parents('.some').data('id'); 
     wrap[idx].action3(event); 
    }); 

在每一个事件，我需要这个额外的行来获得元素的ID，我点击，这是在对象的数组索引。我想摆脱这条线。

有没有办法在事件发生前致电var idx = $(this).parents('.some').data('id');并将idx作为事件的参数？

或任何其他方式来组织代码，而不是写在任何地方var idx = $(this).parents('.some').data('id');。

Answer 1

尝试jquery custom events：

$(document).on("myCustomEvent", { 
    foo: "bar" 
}, function(event, idx) { 
    console.log(event.data.foo); // "bar" 
    console.log(idx);   // idx 

}); 



var idx = $(this).parents('.some').data('id'); 

$(document).trigger("myCustomEvent", [ idx ]); 

Answer 2

我想你应该尝试下面的东西。它将处理每个画布点击。

$('body') 
    .on('click', 'canvas', function (event) { 
     var idx = $(this).parents('.some').data('id'); 
     console.log(idx); 
     wrap[idx].action1(event); 

    }); 

Answer 3

“复制” data-id画布

$('.some canvas').each(function() { 
    $(this).data('id', $(this).parents('.some').data('id')); 
}); 

然后代码可以像这样

$('body') 
    .on('click', 'canvas', function (event) { 
     wrap[$(this).data('id')].action1(event); 
    }) 
    .on('mousemove mouseout', 'canvas', function() { 
     wrap[$(this).data('id')].action2(); 
    }) 
    .on('mousemove', 'canvas', function (event) { 
     wrap[$(this).data('id')].action3(event); 
    });