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); 
    });