Response Synthetic Event(합성 이벤트 반응) 왼쪽 및 오른쪽 클릭 이벤트 구분

Response Synthetic Event(합성 이벤트 반응) 왼쪽 및 오른쪽 클릭 이벤트 구분

왼쪽 클릭과 오른쪽 클릭을 구별하려고 합니다.onClick기능:

const App = () => {
  const handleClick = (e) => {
    // detect a left click
    if (e.which == 1){ 
      // do something
    }
  };
  return <p onClick={handleClick}>Something</p>;
};

알고보니e.which가상 이벤트에 대해 정의되지 않았습니다.여기서 왼쪽 클릭과 오른쪽 클릭을 구별하려면 어떻게 해야 합니까?

최신 버전의 React(v16+)에서는 다음 두 가지 모두onClick그리고.onContextMenu왼쪽 클릭 이벤트와 오른쪽 클릭 이벤트를 모두 감지하려면 소품을 통과해야 합니다.

return <p onClick={handleClick} onContextMenu={handleClick}>Something</p>

에 대해 확인할 수 있습니다.e.nativeEvent.button(다른 답변이 암시하는 바와 같이) 또는 체크e.type가상 이벤트 자체에 대해 설명합니다.

사용.e.type

const handleClick = (e) => {
  if (e.type === 'click') {
    console.log('Left click');
  } else if (e.type === 'contextmenu') {
    console.log('Right click');
  }
};

사용.e.nativeEvent

const handleClick = (e) => {
  if (e.nativeEvent.button === 0) {
    console.log('Left click');
  } else if (e.nativeEvent.button === 2) {
    console.log('Right click');
  }
};

다음은 이 기능을 보여주는 최신 데모입니다.

SyntheticEvent에 대한 React 문서를 읽을 수도 있습니다.

(오리지널 데모)

찾으시는 물건은e.button또는e.buttons.

마우스 이벤트가 발생했을 때 누른 버튼 번호: 왼쪽 버튼=0, 가운데 버튼=1(있는 경우), 오른쪽 버튼=2.
_{– MDN: 웹/이벤트/클릭}

그러나 리액션 유무에 관계없이 마우스 왼쪽 버튼(트랙패드)에서만 클릭 이벤트가 발생합니다.온마우스 다운을 사용할 수 있습니다.

다음 데모에서는e.buttonsonContextMenu에서도 기본값을 방지할 수 있습니다.

용도:

if (e.button === 0) { // or e.nativeEvent.which === 1
    // do something on left click
}

DEMO가 있습니다.

onContextMenu={e => console.log("right-click")}


onClick={e => console.log("left-click")}

이 솔루션은 "Mouse Events" 섹션의 React 공식 문서에서 찾을 수 있습니다.

다음은 onContextMenu의 모의 이벤트에 대한 TypeScript 정의입니다.

왼쪽 클릭과 오른쪽 클릭을 구별하기 위해 사용하는 접근법:

const buttons = {
  left: 0,
  middle: 1,
  right: 2,
};

export const App = () => {
  const handleChange = (e) => {
    if (e.button === buttons.left) {
      console.log('left');
    } else if (e.button === buttons.middle) {
      console.log('middle');
    } else if (e.button === buttons.right) {
      console.log('right');
    }
 };

 return (
    <div onContextMenu={(e) => e.preventDefault()} onMouseDown={handleChange}>
      Click me!
    </div>
 );
};

언급URL : https://stackoverflow.com/questions/31110184/react-synthetic-event-distinguish-left-and-right-click-events