在reactjs

时间:2018-03-12 22:53:25

标签: reactjs

当我在jsx中将鼠标事件添加到对象标签时,事件不会被设置

handleMouse(event) {
  console.log(event.screenX+ ' '+event.screenY);
  console.log(event.target);
}

<object width="400" height="800" data={this.props.document} id="pdf_object" 
    onMouseDown={this.handleMouse} onMouseUp={this.handdleMouse}>PDF should load here</object>

但是,如果我将事件监听器添加到包含div,它可以工作:

<div onMouseDown={this.handleMouse} onMouseUp={this.handdleMouse}>
  <object width="400" height="800" data={this.props.document} 
     id="pdf_object">PDF should load here</object>
</div>

我想知道为什么在我可以将鼠标事件添加到html中的对象标签时就是这种情况

<object width="400" height="800" data="ex2.pdf" 
    onmousedown="console.log('down')" onmouseup="console.log('up')"></object>

1 个答案:

答案 0 :(得分:0)

以下是它在Object上运行良好的示例

&#13;
&#13;
import React, { Component } from 'react';

class App extends Component {
  constructor(){
    super()
    this.mouseDown = this.mouseDown.bind(this);
    this.mouseUp = this.mouseUp.bind(this);
    this.click = this.click.bind(this);
  }

  mouseDown(event){
    console.log("Mouse Down Event");
    console.log(event.screenX+ ' '+event.screenY);
  }

  mouseUp(event){
    console.log("Mouse Up Event");
    console.log(event.screenX+ ' '+event.screenY);
  }

  click(){
    console.log("Mouse Clicked");
  }

  render() {
    return (
      <div>   
        <object width="400" height="800" data={this.props.document} 
          onMouseDown={this.mouseDown}
          onMouseUp={this.mouseUp}
          onClick = {this.click}
         id="pdf_object">PDF should load here</object>
      </div>
    );
  }
}

export default App;
&#13;
&#13;
&#13;