当我在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>
答案 0 :(得分:0)
以下是它在Object上运行良好的示例
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;