javascript - Prevent click after focus event - Stack Overflow

admin管理员组

文章数量:1329008

When user clicks on input field, two consecutive events are being executed: focus and click.

focus always gets executed first and shows the notice. But click which runs immediately after focus hides the notice. I only have this problem when input field is not focused and both events get executed consecutively.

I'm looking for the clean solution which can help me to implement such functionality (without any timeouts or weird hacks).

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

UPDATED Fiddle is here:

When user clicks on input field, two consecutive events are being executed: focus and click.

focus always gets executed first and shows the notice. But click which runs immediately after focus hides the notice. I only have this problem when input field is not focused and both events get executed consecutively.

I'm looking for the clean solution which can help me to implement such functionality (without any timeouts or weird hacks).

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

UPDATED Fiddle is here:

• javascript
• jquery
• html

Share Improve this question Follow edited May 6, 2014 at 8:32 Bhushan Kawadkar 28.5k55 gold badges3939 silver badges6060 bronze badges asked May 6, 2014 at 7:41 Artem FitiskinArtem Fitiskin 63766 silver badges1717 bronze badges 5

• Is this what you are after? jsfiddle/3Bev4/11 – Abhitalks Commented May 6, 2014 at 7:56
• Why are you not using addClass() and removeClass() bination on _onFocus and _onBlur. Is toggle-ing a class on click event really necessary? – Suraj Kumar Commented May 6, 2014 at 8:00
• @abhitalks No. Click should toggle show/hide by itself – Artem Fitiskin Commented May 6, 2014 at 8:00
• @SurajKumar Yes, it's necessary. It's simple example, in real code another reason to use it. – Artem Fitiskin Commented May 6, 2014 at 8:02
• @ArtemFitiskin: updated the fiddle and added as answer. – Abhitalks Commented May 6, 2014 at 8:02

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 3

I think you jumbled up the toggles. No need to prevent propagation and all that. Just check if the notice is already visible when click fires.

Demo: http://jsfiddle/3Bev4/13/

Code:

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
}

Hope that helps.

Update: based on OP's clarification on click toggling:

Just cache the focus event in a state variable and then based on the state either show the notice or toggle the class.

Demo 2: http://jsfiddle/3Bev4/19/

Updated code:

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

Update 2: based on OP's observation on first click after tab focus:

On second thought, can you just bind the mousedown or mouseup instead of click? That will not fire the focus.

Demo 3: http://jsfiddle/3Bev4/24/

Updated code:

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

Does that work for you?

Setting a variable for "focus" seems to do the trick : http://jsfiddle/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');
}

If you want to hide the notice onBlur, surely it needs to be:

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

When doing this in the fiddle, it seemed to fix it.

The code you have written is correct, except that you have to replae $('#notice').removeClass('hide'); with $('#notice').addClass('hide');

Because onBlur you want to hide so add hide class, instead you are removing the "hide" calss.

I hope this is what the mistake you have done. Correct if I am wrong, Because I don't know JQuery much, I just know JavaScript.

you can use many jQuery methods rather than add or move class:

Update: add a params to deal with the click function http://jsfiddle/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(); 
});

本文标签： javascriptPrevent click after focus eventStack Overflow