Javascript 防止焦点事件后单击

当用户单击输入字段时，将执行两个连续事件：

focus

和

click

focus

始终首先执行并显示通知。但是，

单击

，它会在焦点后立即运行，隐藏通知。我只有在输入字段未聚焦且两个事件连续执行时才会出现此问题

我正在寻找干净的解决方案，可以帮助我实现这样的功能（没有任何超时或奇怪的黑客）

HTML：

<label for="example">Example input: </label>
<input type="text" id="example" name="example" />
<p id="notice" class="hide">This text could show when focus, hide when blur and toggle show/hide when click.</p>

---

更新的Fiddle是：

如果您想隐藏blur上的通知，它肯定需要：

function _onBlur(e) {
    console.log('blur');
    $('#notice').addClass('hide'); // Add the hidden class, not remove it
}

在小提琴中进行此操作时，它似乎可以解决此问题。

为“焦点”设置一个变量似乎可以解决此问题：

Javascript:

$('#example').on('focus', _onFocus)
    .on('click', _onClick)
    .on('blur', _onBlur);
focus = false;

function _onFocus(e) {
    console.log('focus');
    $('#notice').removeClass('hide');

    e.preventDefault();
    e.stopPropagation();
    e.stopImmediatePropagation();
    focus = true;
}

function _onClick(e) {
    console.log('click');
    if (!focus) {
        $('#notice').toggleClass('hide');
    } else {
        focus = false;
    }
}

function _onBlur(e) {
    console.log('blur');
    $('#notice').addClass('hide');
}

---

我想你把开关弄乱了。不需要阻止传播和所有这些。当

单击

时，只需检查通知是否已可见即可

演示：

代码：

希望有帮助

更新：根据OP对点击切换的说明：

只需将焦点事件缓存在状态变量中，然后根据状态显示通知或切换类

演示2:

更新代码：

更新2：根据OP对选项卡焦点后第一次单击的观察：

再想一想，你能不能只绑定

mousedown

或

mouseup

而不是

单击

？这不会激发焦点

演示3:

更新代码：

---

这对您有用吗？

您可以使用许多jQuery方法，而不是添加或移动类：

更新：添加一个参数来处理点击功能

---

您编写的代码是正确的，只是您必须重新播放

$（'#notice'）。removeClass（'hide'）$（'#notice'）.addClass（'hide'）

因为onBlur您想要隐藏，所以添加隐藏类，而不是删除“隐藏”计算

我希望这就是你所犯的错误。
如果我错了，请更正，因为我不太懂JQuery，我只懂JavaScript。
这就是你想要的吗？为什么不在焦点和模糊上使用addClass（）和removeClass（）组合呢。是否真的需要在单击时切换类事件？@abhitalks否。单击应切换显示/隐藏方式itself@SurajKumar是的，这是必要的。这是一个简单的例子，在实际代码中是使用它的另一个原因。@artemfitskin:更新了小提琴并添加为答案。谢谢，但在您的解决方案中，单击“不作为切换者工作”。看看我的小提琴，试着点击几下一个区域times@ArtemFitiskin：好的，现在我明白你想表达的意思了。在那里，更新了答案。你对Rob Schmuecker的答案也有类似的问题。第一次点击聚焦字段不会有任何效果（预期会隐藏通知），我也有设置超时的想法，但这不是明确的解决方案_onFocus-->isFocus=true；setTimeout（函数（）{isFocus=false}，500）@Artemfitskin：再次更新了答案。你能不能只绑定mousedown或mouseup而不是单击？这不会激发焦点。演示：如果您使用Tab按钮选择字段（没有单击的焦点不会显示通知），您的解决方案将不起作用。添加一个参数，以便我们可以处理单击功能我完全理解此方法，但如果您使用Tab按钮选择字段（相应地显示通知）并单击它，则您将看到单击的else语句（什么也没发生，一定是隐藏了）。+1@Rob。很抱歉，在OP要求我之前我没有注意到你的回答。否则我一开始就不会尝试了！
$('#example').on('focus', _onFocus)
    .on('click', _onClick)
    .on('blur', _onBlur);
focus = false;

function _onFocus(e) {
    console.log('focus');
    $('#notice').removeClass('hide');

    e.preventDefault();
    e.stopPropagation();
    e.stopImmediatePropagation();
    focus = true;
}

function _onClick(e) {
    console.log('click');
    if (!focus) {
        $('#notice').toggleClass('hide');
    } else {
        focus = false;
    }
}

function _onBlur(e) {
    console.log('blur');
    $('#notice').addClass('hide');
}

var $notice = $('#notice'); // cache the notice

function _onFocus(e) {  
    console.log('focus');
    $notice.removeClass('hide'); // on focus show it
}

function _onClick(e) {
   console.log('click');
    if ($notice.is('hidden')) { // on click check if already visible
       $notice.removeClass('hide'); // if not then show it
    }
}

function _onBlur(e) {
    console.log('blur');
    $notice.addClass('hide'); // on blur hide it
}

var $notice = $('#notice'), isfocus = false; 

function _onFocus(e) {  
    isFocus = true; // cache the state of focus
    $notice.removeClass('hide');
}

function _onClick(e) {
    if (isFocus) { // if focus was fired, show/hide based on visibility
        if ($notice.is('hidden')) { $notice.removeClass('hide'); }
        isFocus = false; // reset the cached state for future
    } else {
        $notice.toggleClass('hide'); // toggle if there is only click while focussed
    }
}

$('#example').on('focus', _onFocus)
             .on('blur', _onBlur)
             .on('mousedown', _onClick);

var $notice = $('#notice');
function _onFocus(e) { $notice.removeClass('hide'); }
function _onClick(e) { $notice.toggleClass('hide'); }
function _onBlur(e) { $notice.addClass('hide'); }

var showNotice = false;
$('#example').focus(function(){
     $('#notice').show();
     showNotice = true;
}).click(function(){
    if(showNotice){                
         $('#notice').show();
        showNotice = false;
    }else{
         showNotice = true;
        $('#notice').hide();
    }


}).blur(function(){
     $('#notice').hide(); 
});