文章/答案/技术大牛

发布

社区首页 >问答首页 >鼠标按下按钮时，只发生鼠标事件。

问鼠标按下按钮时，只发生鼠标事件。
EN

Stack Overflow用户

提问于 2012-11-12 23:02:20

回答 1查看 469关注 0票数 0

下面的jQuery代码用于在各种表单textbox (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");
        });
}

这种情况如下：

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

该问题是由鼠标在其他元素上移动时引发的各种鼠标事件引起的，除了释放鼠标按钮时的最后一个mouseleave。请参阅http://jsfiddle.net/richev/VXUS9/8/的工作演示。对这里发生了什么有什么想法吗？

更新

在jQuery工具提示上的IE中也存在这个问题。

jquery

internet-explorer-9

回答 1

Stack Overflow用户

发布于 2012-11-13 10:35:33

这是一个临时的解决方案，当您了解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();
});

我从下面的测试 (IE8)中得到的结果如下所示，但显然您得到了不同的结果。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/13353042

复制

相似问题

问鼠标按下按钮时，只发生鼠标事件。
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问鼠标按下按钮时，只发生鼠标事件。EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问鼠标按下按钮时，只发生鼠标事件。
EN