Question

当我在外面点击时，我试图制作一个内容消失的工具提示，但尝试了不同帖子的解决方案，这些解决方案都不适合我。

我认为问题在于我是如何触发工具提示的，但这是我知道的唯一方法，这里是我在js和html标记中的代码。

工具提示可以很好地触发，但它无法以我尝试过的任何方式处理模糊事件。

$(document).ready(function() {

    function tooltover(target_item){
        $(target_item + '> a').click(function(){
            $('.tiptover_box').focus();

            var pos = $(this).position();
            var width = $(this).outerWidth();
            var boxw = $(this).next().outerWidth();
            var boxh = $(this).next().outerHeight();

            $(this).next().css('left', (pos.left - ((boxw/2)-(width/2))));
            $(this).next().css('top', (pos.top - (boxh+5)));
            $(this).next().addClass('tiptover_show');
            $(this).next().delay(5).queue(function(){
                $(this).addClass('tt-in');
                $(this).dequeue();
            });
        });
        $('.tiptover_box').blur( function(){
            $('.tiptover_box').removeClass('tiptover_show tt-in');
        });
    } tooltover('.tiptover');

});

HTML

<div class="tiptover">
    <a>Link Test</a>
    <div class="tiptover_box" style="background-image: url(content/prod_0002.jpg);">
        <div>Description.</div>
    </div>
</div>

Answer 1

另一种方法是不关注div本身，而是关注DOM的其余部分。

this solution prc322在类似问题的this answer中，他使用了mouseup本身的document事件：

$(document).mouseup(function (e)
{
    var container = $(".tiptover_box");

    if (!container.is(e.target) // if the target of the click isn't the container...
        && container.has(e.target).length === 0) // ... nor a descendant of the container
    {
        container.removeClass('tiptover_show tt-in');
    }
});

^{（由我编辑以获取相关性）}

现在您的工具提示将被关闭＆＃34;每当mouseup事件触发任何不是.tiptover_box或其任何后代的元素时。

Answer 2

不是试图触发div的blur事件（它不像模糊输入字段那样可靠），你可以按照你想要的那样做 - 当点击任何内容时，你隐藏工具提示：

$('body').click(function(e){
        var tooltipContainer = $('.tiptover_box');
        var clickTarget = e.target;

        if(!tooltipContainer.is(clickTarget)
          && tooltipContainer.has(clickTarget).length === 0){
            tooltipContainer.removeClass('tiptover_show tt-in');
        }
});

编辑：为容器及其子容器添加测试，基本上与Bob的答案相同。

jQuery Blur（）不使用click（）函数

2 个答案: