0

バニラ 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();

        };

よろしく、クリス

4

1 に答える 1