バニラ JavaScript で記述されたコードがあり、実行時のある時点でカスタム イベントをトリガーします。これは、次のコードで jQuery によって処理されます。
// Fired on when snapshot is ready
$(document).bind('SnapshotReady', function(e) {
$('#image_container').zoom(); // zoom library
$(document).on('mousestop', '.zoomImg', function() {
alert('mousestop event occurs');
})
});
問題は、mousestop
イベントがそのように呼び出されないことです。zoom ライブラリのコードでは、.zoomImg
クラスを使用して要素を動的に作成し、次のイベント ハンドラーを持っています。
$img.on('mousemove', zoom.move);
しかし、上記の行を次のように変更すると:
$img
.on('mousemove', zoom.move)
.on('mousestop', function() {
// strange, but event in other code is fired that way
});
...すべてが例外として機能しますが、計算を2回実行したくないため、ズームライブラリのコードではなく、コードの最初の部分でこのイベントをトリガーする必要があります。
mousestop
イベントの実装に使用されるライブラリは次のとおりです: https://github.com/richardscarrott/jquery-mousestop-event/blob/master/jquery.event.mousestop.js
編集:
/* The core code of zoom library */
img.onload = function () {
var zoom = $.zoom(target, source, img);
function start() {
zoom.init();
// Skip the fade-in for IE8 and lower since it chokes on fading-in
// and changing position based on mousemovement at the same time.
$img.stop();
$img.on('mousemove', zoom.move);
zoom.automove();
}
function stop() {
$img.clearQueue().stop();
}
$(source).on('mouseleave', stop)
start();
};
よろしく、クリス