Question

当用户点击输入字段时，正在执行两个连续的事件：focus和click。

总是首先执行

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>

JavaScript ：

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

function _onFocus(e) {  
    console.log('focus');

    e.preventDefault();
    e.stopPropagation();
    e.stopImmediatePropagation();

    $('#notice').removeClass('hide');
}

function _onClick(e) {
   console.log('click');
   $('#notice').toggleClass('hide');
}

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

更新的小提琴是here：

Answer 1

我认为你混淆了乞丐。无需阻止传播等等。只需检查click触发时通知是否已显示。

演示：http://jsfiddle.net/3Bev4/13/

代码：

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
}

希望有所帮助。

更新：基于OP对点击切换的说明：

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

演示2：http://jsfiddle.net/3Bev4/19/

更新了代码：

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
    }
}

更新2 ：根据OP在标签焦点后第一次点击观察：

第二个想法，你能绑定mousedown或mouseup而不是click吗？这不会引起关注。

演示3：http://jsfiddle.net/3Bev4/24/

更新了代码：

$('#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'); }

这对你有用吗？

Answer 2

为“焦点”设置变量似乎可以解决问题：http://jsfiddle.net/3Bev4/9/

使用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');
}

Answer 3

如果你想隐藏通知onBlur，肯定需要：

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

当在小提琴中这样做时，它似乎解决了它。

Answer 4

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

更新：添加一个参数来处理点击功能 http://jsfiddle.net/3Bev4/23/

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(); 
});

Answer 5

您编写的代码是正确的，但您必须使用$('#notice').removeClass('hide');

重播$('#notice').addClass('hide');

因为 onBlur 你要隐藏所以添加隐藏类，而不是删除“隐藏”calss。

我希望这就是你所犯的错误。如果我错了，请更正，因为我不太了解JQuery，我只知道JavaScript。

在焦点事件后防止点击

5 个答案: