Question

我有使用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();

        };

问候，克里斯

Answer 1

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

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

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

jQuery绑定事件的奇怪行为

1 个答案: