1

DOM要素を強調表示するリスナーを起動する次のJavaScript/jQueryコードがあります。

ボタンをクリックして、リスナーイベントを開始します。例：ハイライト：function（）

Webページで何かをクリックすると、リスナーが停止します。

ここで、ボタンをもう一度クリックすると、リスナーイベントを再開したいと思います。

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 に答える