如何防止鼠標右鍵單擊onMouseDown（）反應js？

Question

我正在使用onMouseDown和onMouseUp進行更好的控制。 我已經有onContextMenu但是如何防止右鍵單擊onMouseDown和onMouseUp 。我只希望單擊左鍵。

因為目前有 2 個事件同時觸發。 我的上下文菜單和其他 function 同時打開。

Answer 1

您可以檢查e.button === 2與否。 當您右鍵單擊時， e.button的值為2 。

雖然我不確定它是否支持瀏覽器。

你可以檢查這個例子。

 const {useState} = React; const App = () => { const [value, setValue] = useState('left or right click'); const handleMouseDown = (e) => { if(e.button === 2) return; console.log('handleMouseDown'); } const handleMouseUp = (e) => { if(e.button === 2) return; console.log('handleMouseUp'); } const handleContextMenu = (e) => { console.log('handleContextMenu'); } return ( <div className="test" onMouseDown={handleMouseDown} onMouseUp={handleMouseUp} onContextMenu={handleContextMenu} >{value}</div> ); }; // Render it ReactDOM.render( <App/>, document.getElementById("react") );

 .test { width: 100vw; height: 100vh; text-align: center; font-size: 20px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script> <div id="react"></div>

Answer 2

onMouseDown={(event) => {
 if (event.button === 0) { ***write some code***}
}}

event.button === 0 left , event.button === 1 middle , event.button === 2 right ,