Question

我有以下JavaScript / jQuery代码启动突出显示DOM元素的侦听器。

我单击一个按钮，然后启动监听器事件。例如：突出显示：function（）

当我点击网页上的内容时，我会停止听众。

现在，当我再次单击该按钮时，我想重新启动侦听器事件。

highlight : function()
    {
        if(isHighlighting){
            isHighlighting = false;
            $(document).unbind("mousemove", highlighter);
            return false;
        }

        $(document).bind("mousemove", highlighter);
        isHighlighting = true;
    },

我还有捕获onclick事件的代码，并停止DOM元素突出显示

function highlighter(e) {
    var cur, overlay = $("#overlayhighlightclosetaffair"),
    no = [document.body, document.documentElement, document];
    if (e.target === cur) {
        return;
    }

    if (~no.indexOf(e.target)) {
        cur = null;
        overlay.hide();
        return;
    }

    var target = $(e.target),
    offset = target.offset(),
    width = target.outerWidth(),
    height = target.outerHeight();
    cur = e.target;
    overlay.css({
        top: offset.top,
        left: offset.left,
        width: width,
        height: height
    }).show();

    $(document).click(
        function() {
            if(isHighlighting){
                isHighlighting = false;
                $(document).unbind("mousemove", highlighter);
                console.log('click');
            }
    });
}

Answer 1

您无需取消绑定事件，并可以简化您的逻辑。

这不是一个功能齐全的例子，但它应该是一个很好的起点。我建议构造代码，使isHighlighting不是全局的。

function highlightElement(e) {
    if(isHighlighting) {
        /* this is where you put the code to highlight e.target */
    }
}

/* call this one time */
$(document).click(
    function(e) {
        /* this will be true if we clicked the button, false if we clicked anything else */
        isHighlighting = e.target === highlightButtonNode;
    }
});

/* also call this once */
$(document).bind("mousemove", highlightElement);

这是使用绑定和解除绑定的替代解决方案。我不推荐这种方法，但这是处理解除绑定和重新绑定的更好方法。忘记设置isHighlight = false。是一个不太严重的错误，而不是忘记取消绑定事件。这会导致内存泄漏，并且对事件处理程序的多次调用更可能产生更糟糕的副作用。

/* call this one time */
$(document).click(
    function(e) {
        /* this will be true if we clicked the button, false if we clicked anything else */
        if(e.target === highlightButtonNode) {
            $(document).bind("mousemove", highlightElement);
        } else {
            $(document).unbind("mousemove", highlightElement);
        }
    }
});

如何在jquery中重新绑定事件？

1 个答案: