Javascript 模糊点击不能一起工作

发布于 2024-09-12 14:02:30 字数 1229 浏览 11 评论 0原文

HTML：

<input type='text' class='a' />
<div class='inst' tag='a'></div>
<input type='text' class='b' />
<div class='inst' tag='b'></div>
<input type='text' class='c' />
<div class='inst' tag='c'></div>

JS：

$(function() {
    $('.inst').click(function() {
        alert($(this).attr('tag') + ' clicked');
    });

    $('[type=text]').focus(function() {
       show_inst($(this).attr('class'));
    }).blur(function() {
       //hide_inst($(this).attr('class'));
    });

    function show_inst(tag) {
        $('div.inst[tag=' + tag + ']').html(tag + ' instructions');
    }

    function hide_inst(tag) {
        $('div.inst[tag=' + tag + ']').html('');
    }
});

CSS：

.inst {
    width: 200px;
    height: 100px;
    border: 1px solid black;
    margin: 10px;
    cursor: pointer;
}

工作正常：当安装时单击 我会看到警报消息，当输入成为焦点时，会出现指令。

现在我希望不相关的指令在模糊时消失。所以我尝试在 blur() 中添加注释行。它不会像那样工作，因为首先调用 blur() 并删除指令，所以如果我单击指令 - 什么也不会发生。

我该如何解决这个问题？

原文

I have the following code:

HTML:

<input type='text' class='a' />
<div class='inst' tag='a'></div>
<input type='text' class='b' />
<div class='inst' tag='b'></div>
<input type='text' class='c' />
<div class='inst' tag='c'></div>

JS:

$(function() {
    $('.inst').click(function() {
        alert($(this).attr('tag') + ' clicked');
    });

    $('[type=text]').focus(function() {
       show_inst($(this).attr('class'));
    }).blur(function() {
       //hide_inst($(this).attr('class'));
    });

    function show_inst(tag) {
        $('div.inst[tag=' + tag + ']').html(tag + ' instructions');
    }

    function hide_inst(tag) {
        $('div.inst[tag=' + tag + ']').html('');
    }
});

CSS:

.inst {
    width: 200px;
    height: 100px;
    border: 1px solid black;
    margin: 10px;
    cursor: pointer;
}

It works fine: when inst is clicked I see the alert message, and when the input becomes focused the instruction appears.

Now I want the not relevant instruction to disappear on blur. So I tried to add the commented line inside blur(). It does not work like that because blur() is called first and removes the instruction, so if I click on the instruction - nothing happens.

How could I solve this?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

尬尬 2024-09-19 14:02:31

如果您唯一的问题是指令在单击之前被隐藏，请考虑添加一点延迟。这基本上会导致您的隐藏指令在处理点击后执行。

像这样的事情：

$('[type=text]').focus(function() {
   show_inst($(this).attr('class'));
}).blur(function() {
   setTimeout(function(){
     hide_inst($(this).attr('class'));
   }, 50); // make this happen after any other events
});

If your only issue is that the instruction is hidden before the click on it is issued, consider adding a tiny delay. This will basically cause your hide instruction to be executed after the click is processed.

Something like this:

$('[type=text]').focus(function() {
   show_inst($(this).attr('class'));
}).blur(function() {
   setTimeout(function(){
     hide_inst($(this).attr('class'));
   }, 50); // make this happen after any other events
});

回复收藏 0 原文

残疾 2024-09-19 14:02:31

        var timeoutId;
        $('[type=text]').on("blur", function(){
            timeoutId = setTimeout(function(){                     
                console.log("blur");
            }, 50);
        }).on("focus", function(){
            clearTimeout(timeoutId);
        });

或者你可以尝试这个，只有当你离开输入时它才会触发模糊（“错误”点击被clearTimeout删除）。

        var timeoutId;
        $('[type=text]').on("blur", function(){
            timeoutId = setTimeout(function(){                     
                console.log("blur");
            }, 50);
        }).on("focus", function(){
            clearTimeout(timeoutId);
        });

Or you can try this, it will fire blur only when you leave the input (the "false" click is removed by clearTimeout).

回复收藏 0 原文

~没有更多了~