2017-07-02 70 views
0

我有事件在画布上onMouseDown -问题在reactjs与event.which - 未定义

<canvas id="myCanvas" width="150" height="150" onMouseMove={this.beginNewPatch.bind(this)}></canvas> 

但是,当我在上面画布上移动,我想,如果在鼠标左键点击与e.which到现在得到的,但这打印undefined。任何提示为什么?

beginNewPatch(e){ 
    console.log(e.which); 
    if (e.which === 1) { 
    let dot, eventDoc, doc, body, pageX, pageY; 
    e = e || window.event; 
    } 
} 

回答

0

尝试event.button(在这里看到来自MDN):

class App extends React.Component { 
 
    constructor() { 
 
    super(); 
 
    this.beginNewPatch = this.beginNewPatch.bind(this); 
 
    } 
 
    
 
    componentDidMount() { 
 
    const ctx = this.refs.canvas.getContext('2d'); 
 
    ctx.fillRect(0,0, 100, 100); 
 
    } 
 
    
 
    beginNewPatch(event) { 
 
    console.log(event.button); 
 
    } 
 
    
 
    render() { 
 
    return (
 
     <canvas 
 
     ref="canvas" 
 
     width={100} 
 
     height={100} 
 
     onMouseDown={this.beginNewPatch} 
 
     /> 
 
    ); 
 
    } 
 
} 
 

 
ReactDOM.render(
 
    <App />, 
 
    document.getElementById('app') 
 
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 

 
<div id="app"></div>