javascript - How to detect Click + [Shift, Ctrl, Alt] in reactjs click event? - Stack Overflow

admin管理员组

文章数量:1324848

I want to do some other things when user Click+[Ctrl], but it seems that I could not detect if user press Ctrl when clicking.

I copy the event object infos below.

bubbles    :    false
cancelBubble    :    false
cancelable    :    false
currentTarget    :    react
defaultPrevented    :    false
eventPhase    :    2
isTrusted    :    false
path    :    Array[1]
returnValue    :    true
srcElement    :    react
target    :    react
timeStamp    :    5690056.695
type    :    "react-click"

I can see the ctrlKey attribute in the arguments[0]-Proxy Object. But this object is unaccessable('Uncaught illegal access'):

[[Target]]
:
SyntheticMouseEvent
_dispatchInstances:ReactDOMComponent
_dispatchListeners:(e)
_targetInst:ReactDOMComponent
altKey:false
bubbles:true
button:0
buttons:0
cancelable:true
clientX:275
clientY:315
ctrlKey:false

I want to do some other things when user Click+[Ctrl], but it seems that I could not detect if user press Ctrl when clicking.

I copy the event object infos below.

bubbles    :    false
cancelBubble    :    false
cancelable    :    false
currentTarget    :    react
defaultPrevented    :    false
eventPhase    :    2
isTrusted    :    false
path    :    Array[1]
returnValue    :    true
srcElement    :    react
target    :    react
timeStamp    :    5690056.695
type    :    "react-click"

I can see the ctrlKey attribute in the arguments[0]-Proxy Object. But this object is unaccessable('Uncaught illegal access'):

[[Target]]
:
SyntheticMouseEvent
_dispatchInstances:ReactDOMComponent
_dispatchListeners:(e)
_targetInst:ReactDOMComponent
altKey:false
bubbles:true
button:0
buttons:0
cancelable:true
clientX:275
clientY:315
ctrlKey:false

• javascript
• reactjs

Share Improve this question Follow edited Aug 19, 2016 at 6:57 Jack Hu asked Aug 16, 2016 at 12:15 Jack HuJack Hu 1,37322 gold badges1313 silver badges2727 bronze badges 1

• possible duplicate – oklas Commented Mar 8, 2018 at 17:01

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 47

Your click handling function would have a format as such:

clickHandler: function (event, value) {

   event.stopPropagation();

   // In that case, event.ctrlKey does the trick.
   if (event.ctrlKey) {
        console.debug("Ctrl+click has just happened!");
   }
}

you can use this code below in your render() method

document.addEventListener('click', (e) => {
  if (e.ctrlKey) {
    console.log('With ctrl, do something...');
  }
});

In the click event of this element you can check if at the moment of the click, a button (with keycode of ctrl in this case) is pressed down

本文标签： javascriptHow to detect ClickShiftCTRLAlt in reactjs click eventStack Overflow