按住鼠标按钮时仅IE的鼠标事件问题

Question

以下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");
        });
}

该情况如下：

• 文本框中的Mousedown
• 将鼠标移出文本框工具提示继续显示
• 释放鼠标按钮鼠标按钮释放后工具提示保持可见

问题是由鼠标移动到其他元素上时触发的各种鼠标事件引起的，当鼠标按钮被释放时除了最终mouseleave。查看http://jsfiddle.net/richev/VXUS9/8/的工作演示。关于这里发生了什么的任何想法？

更新

Bassistance jQuery tooltip上的IE中也存在此问题。

Answer 1

当您找出mouseevents时，这是一个临时解决方案。基本上它在执行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();
});

以下test（IE8）的结果看起来像这样，但显然你会得到不同的结果。