0

次の jQuery コードは、さまざまなフォーム テキスト ボックス ( input type='text' title='tooltip text') 要素にツールチップを表示するために使用されています。特定のシナリオを除いて、IE（7-9）でのみ機能します。

function toolTip() {
    var xOffset = 10;
    var yOffset = 20;

    $(".tooltip")
        .each(function () {
            this.tooltipText = this.title;
            $(this).removeAttr("title");
        })
        .mouseenter(function (e) {
            $("body").append("<p id='tooltip'>" + this.tooltipText + "</p>");
            $("#tooltip")
                .css("top", (e.pageY - xOffset) + "px")
                .css("left", (e.pageX + yOffset) + "px")
                .fadeIn("fast");
        })
        .mouseleave(function () {
            $("#tooltip").remove();
        })
        .mousemove(function (e) {
            $("#tooltip")
                .css("top", (e.pageY - xOffset) + "px")
                .css("left", (e.pageX + yOffset) + "px");
        });
}

そのシナリオは次のとおりです。

  • テキストボックスでのマウスダウン
  • マウスをテキスト ボックスの外に移動すると、ツールチップが引き続き表示されます
  • マウス ボタンを離す マウス ボタンを離した後もツールチップが表示されたままになります

この問題は、マウス ボタンが離されたときのfinalとは別に、マウスが他の要素の上に移動したときに発生するさまざまなマウス イベントによって引き起こされmouseleaveます。http://jsfiddle.net/richev/VXUS9/8/で動作するデモを参照してください。ここで何が起こっているかについて何か考えはありますか？

アップデート

この問題は、IE のBassistance jQuery ツールチップにも存在します。

4

1 に答える 1

1

これは、マウスイベントを把握している間の暫定的な解決策です。基本的に、mouseenter コードを実行する前に、ターゲットが実際に入力であるかどうかをチェックします。

http://jsfiddle.net/LCefq/1/

function toolTip() {
    var xOffset = 10;
    var yOffset = 20;

    var tooltipElems = $(".tooltip");

    tooltipElems.each(function() {
        this.tooltipText = this.title;
        $(this).removeAttr("title");
    });

    tooltipElems.mouseenter(function(e) {
        if ($(e.target).is('.tooltip')) {
            $("body").append("<p id='tooltip'>" + this.tooltipText + "</p>");
            $("#tooltip").css("top", (e.pageY - xOffset) + "px").css("left", (e.pageX + yOffset) + "px").fadeIn("fast");
            $('#state').append("<div>mouseenter" + $(e.target)[0].tagName +"</div>");
        }
    }).mouseleave(function() {
        $("#tooltip").remove();
        $('#state').append("<div>mouseleave</div>");
    });

    $(".tooltip").mousemove(function(e) {
        $("#tooltip").css("top", (e.pageY - xOffset) + "px").css("left", (e.pageX + yOffset) + "px");
    });
}

$(document).ready(function() {
    toolTip();
});

次のテスト(IE8)の結果は次のようになりますが、明らかに異なる結果が得られます。

ここに画像の説明を入力

于 2012-11-13T10:35:33.033 に答える