0

我有用 vanilla 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事件永远不会以这种方式调用。在缩放库的代码中，我们使用.zoomImg类动态创建了元素，它具有以下事件处理程序：

$img.on('mousemove', zoom.move);

但是，如果我将上面的行更改为：

$img
.on('mousemove', zoom.move)
.on('mousestop', function() {
    // strange, but event in other code is fired that way
 });

...一切正常，但我不想做两次计算，我需要在第一段代码中触发此事件，而不是在缩放库的代码中。

用于实现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

1

从您发布的片段来看，问题似乎出在您的缩放库代码中，特别是这一点：

        $(source)
        .on('mouseleave', stop)

mousestop 插件会检查 mouseenter/mouseleave 事件，但您的缩放库也会处理 mouseleave 事件，这似乎会在两个脚本之间造成混淆。但是，如果没有 jsFiddle，要弄清楚发生了什么并不容易。如果这不是问题，您能否创建一个有效的 jsFiddle 示例？

于 2013-06-05T08:47:36.573 回答