2

Here's what I'm trying to do...

I'm building a custom tab navigation system that acts similar to Chrome on Mac (the setup that all my users have; nobody has Windows nor uses anything other than Chrome).

When the user clicks on a link without a Command key pressed, I need to create a new tab and then give that tab focus. This part is working fine.

When the user clicks on a link with a Command key pressed, I need to create a new tab but not give that tab focus. This is the part I can't figure out.

In looking over some Javascript tutorials I found, it seems that I need to intercept the keyup and keydown events, keep track of whether the Command key is up or down, and then take that into consideration when the component gets the event when a button or link is pressed.

But I haven't found a way to intercept those events outside of something like the keyup and keydown events you can process as part of an input field, which doesn't help me.

Is there any way to intercept keyboard or browser events like keyup and keydown, or otherwise detect a Command key is pressed at the time a link or button event is handled?

Thanks!

  • This question seems to be solely focused on Javascript. As such, you should ask it on Stack Overflow, not here. – Adrian Larson Nov 3 '16 at 0:56
  • 1
    @AdrianLarson Actually, doing this in Lightning may not be initially obvious, so I think it's okay. – sfdcfox Nov 3 '16 at 1:17
  • 1
    I decided to ask it here, since with LockerService enabled (which I'm going to have enabled for all development), my understanding is many DOM related things are restricted, and I thought that might also include intercepting events. So just in case there are Lightning or LockerService "gotchas", I thought it prudent to ask here. – Florissant53 Nov 3 '16 at 1:19
5

You can still determine the keyboard state during a click event.

Generally, that looks like this:

MyComponentController.js

({
    click: function(component, event, helper) {
        if(event.ctrlKey) {
            window.open('https://www.google.com','_blank');
        } else {
            window.open('https://www.google.com/?q=salesforce','_blank');
        }
    }
})

MyComponent.cmp

<aura:component>
    <span onclick="{!c.click}">
        Click or ctrl-click
    </span>
</aura:component>

Interestingly, it looks like ui:outputURL calls the handler but causes funky behavior, but I did this with a span and onclick, and it worked just fine. That might be the gotcha that you mentioned in the original question.


To reliably get click events working on buttons or links, use lightning or native HTML elements, not ui elements.

Here's an example with a button and a link:

<aura:application extends="force:slds">
    <a href="#" target="_blank" onclick="{!c.click}">Google</a>
    <br />
    <lightning:button onclick="{!c.click}">Google</lightning:button>
</aura:application>
  • This essentially adds an click event listener on the window / component right? If not in lightning would this be like jquery(document).on('click') – Eric Nov 3 '16 at 3:21
  • @Eric No, just the text would be clickable in this example, not the entire window/app. It'd be more like $('span').on('click',function() {...}) for that specific span. You could make the space as big as you wanted, taking up the entire component or just a portion of it. Other types of elements work in the same manner, including div, a, h1, etc. Anything you can attach a click to you can attach a Lightning event to. – sfdcfox Nov 3 '16 at 3:25
  • Ok. Sry took the example as the content inside the span would be the rest of the document / components – Eric Nov 3 '16 at 3:26
  • @Eric Nah, it's okay, I'll add a bit more detail. – sfdcfox Nov 3 '16 at 3:28
  • Thanks for the code - I'll try that out tomorrow. Is the Mac Command key (specifically under Chrome) detected in the same fashion as the Control key? I thought I read in a post I found something about the Command key is a different type of key than the others, although I'm guessing it's still detectible as long as you look for the correct code? – Florissant53 Nov 3 '16 at 6:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.