Detecting the event that causes focus of HTML span tag

Question

I need to determine the event that causes the focus of an HTML span tag. The span tag is a glyhpicon from bootstrap v3.

Right now, I have a .focus() event handler attached to the span tag to catch when the focus occurs but I can't figure out how to tell if the focus was caused by a click or a tab.

HTML tag: <span class="glyphicon glyphicon-ok-circle col-xs-6"></span>

Jquery:

$("span").focus(function (e) {
    var event = "click"   //This "event" var is the event that caused the focus
    if(event == "click"){
        //do something
    }else{
        //if not a click event, do something else
    }
});

Do I use the eventData(e) parameter to detect this?

So far, I haven't been able to find the property that shows what caused the focus inside the eventData(e) parameter. The "originalEvent" property only returns "focus" and not what caused it.

Edit: The answer in Differentiate between focus event triggered by keyboard/mouse doesn't fulfill my question. That user is trying to find whether a click or keyboard event occurs on a jquery "autocomplete" element. I need to find the event that causes the focus on a span tag... not an input tag. The ".focus()" event of the element occurs before all other events.

Answer: Check my post below.

Also, this may help: https://stackoverflow.com/questions/5653332/differentiate-between-focus-event-triggered-by-keyboard-mouse — Rory McCrossan, Jul 16 '18 at 13:28
Possible duplicate of [Differentiate between focus event triggered by keyboard/mouse](https://stackoverflow.com/questions/5653332/differentiate-between-focus-event-triggered-by-keyboard-mouse) — Aayush Sharma, Jul 16 '18 at 13:29
@RoryMcCrossan The reason I need it to do this is because this web app may be used on a tablet or a computer. In the case that a tablet is used, a keyboard will be attached and it will need to be keyboard operational. I need to detect a click/tab event to assign appropriate CSS properties to the UI to abide to the user's device. Unfortunately, the answer to the question you suggested doesn't help me, because the ".bind()" of the click event occurs after the ".focus()" event. I need to determine the original Event that caused the "focus"... not the "click". — BigBen_Davy, Jul 16 '18 at 18:20
@AayushSharma I've rephrased my question above to explain how my post isn't a duplicate. — BigBen_Davy, Jul 16 '18 at 18:26

Kiran Joshi · Answer 1 · 2018-07-17T04:28:32.207

1

    $('span').on('focus', function(e){
          $( 'span' ).mousedown(function() {
                  alert( "focus using click" );
              });
    $(window).keyup(function (e) {
            var code = (e.keyCode ? e.keyCode : e.which);
            if (code == 9) {
               // Using tab
            }
        });
    });

edited Jul 17 '18 at 04:28

answered Jul 16 '18 at 13:33

Kiran Joshi

1,758
2
11
34

i haven't use any id in this code i just used the `span` tag for focus. Try this its work for you. – Kiran Joshi Jul 17 '18 at 04:29

score -1 · Accepted Answer · answered Jul 16 '18 at 20:40

I appreciate everyone's feedback! The answer suggested in the comments helped to partially solve the problem. However, I can't give full credit because it didn't fully answer the question.

The answer suggested in the link was to create a "click" and "keypress" event to update a flag that would be checked on the ".focus()" event to determine the source of how it was triggered. My scenario was more complex. The ".focus()" event occurs before a "click()" event... so the flags wouldn't trigger until after the focus has already occurred and passed. The answer also suggested using a "setTimeout()" to make the focus event wait.. which I found unnecessary in my conclusion.

Conclusion

After some research, it was apparent that a ".mousedown()" event occurs before the ".focus()" event. Using the binded flags listed in the suggested answer above, I created the code below to solve my problem.

$(document).bind('mousedown', function () { isClick = true; }).bind('keypress', function () { isClick = false; });
$("span").focus(function () {

    if (isClick) {
        //Focused by click event
    } else{
        //Focused by keyboard event
    }
});

I also noticed during research that ".bind()" has been deprecated in Jquery v3.0... so I will be switching my code to read:

$(document).mousedown(function () { isClick = true; }).keypress(function () { isClick = false; });
$("span").focus(function () {

    if (isClick) {
        //Focused by click event
    } else{
        //Focused by keyboard event
    }
});

Please add any comments/suggestions/optimizations as a comment to my answer! Would love to hear other input.

Detecting the event that causes focus of HTML span tag

Answer: Check my post below.

2 Answers2

Conclusion