1

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

我单击一个按钮并启动侦听器事件。例如：突出显示：函数（）

当我单击网页中的某些内容时，我会停止监听器。

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

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');
            }
    });
}
4

1 回答 1

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);
        }
    }
});
于 2012-06-13T13:32:52.340 回答