javascript - JQuery 事件监听器首先执行

Question

问题如下:

我有一个外部库，它在某个 div (.MagicThumb-swap) 上有一个事件监听器，当用户单击它时，库会做一些工作。

我必须添加一个必须在库之一之前执行的事件监听器。

这是我要首先运行的事件监听器的代码:

$(".MagicThumb-swap").on("click", function () {
    $("#Zoomer2").show();
    $("#videoShow").remove();
});

问题是:如何让我的事件监听器先于另一个监听器执行？我不允许修改库，因此修改其他事件是不可能的。

编辑:

我的代码是这样的:

 <script>
    $(document).on("click", ".MagicThumb-swap > img", function () {
        console.log("clicked");
        $("#Zoomer2").show();
        $("#videoShow").remove();
    });

    $(document).on("click", ".videoShowMini", function () {
        $("#videoShow").remove();
        $("#Zoomer2").hide();
        $("#zoomerContainer").prepend("<div id='videoShow'>" + $(this).html() + "</div>");

    });
</script>
<script src="../magiczoomplus/magiczoomplus.js" type="text/javascript"></script>

它仍然没有首先执行。

Answer 1

如果您在调用将设置自己的处理程序的库函数之前调用事件注册代码，则您的处理程序将首先被调用。

例如，如果您使用的是 jQuery slider 插件

// Call your event registering code 
$( ".selector" ).click(function(){ console.log('My event handler')});
// Now initialize the external lib
$( ".selector" ).slider({ animate: "fast" });

请注意，如果您使用事件委托(delegate)，您的事件处理程序将在直接在元素上设置的事件之后被调用(因为它必须等到事件在树上冒泡)。

我认为解决这个问题的唯一方法是不使用事件委托(delegate)。

$(".MagicThumb-swap > img").click(function () {
    console.log("clicked");
    $("#Zoomer2").show();
    $("#videoShow").remove();
});

$(".videoShowMini").click( function () {
    $("#videoShow").remove();
    $("#Zoomer2").hide();
    $("#zoomerContainer").prepend("<div id='videoShow'>" + $(this).html() + "</div>");
});

另请注意，如果您根本不想调用他们的处理程序，则必须调用 http://api.jquery.com/event.stopimmediatepropagation/

这意味着如果您要动态插入 .MagicThumb-swap > img 元素，则必须在将元素添加到 DOM 时注册处理程序(这样它才能工作)并且从 DOM 中删除元素时删除处理程序(以防止内存泄漏)