react 按下鼠標(biāo)移動監(jiān)聽不到onMouseMove事件，松開時(shí)也監(jiān)聽不到onMouseUp

<img alt="" src={Url}
  onMouseDown={handleMouseDown}
  onMouseMove={handleMouseMove}
  onMouseUp={handleMouseUp}
/>

事件

  let flag = false
  const handleMouseDown = () => {
    flag = true
    console.log('down')
  }
  const handleMouseMove = () => {
    if (flag) {
      console.log('move')
    }
  }
  const handleMouseUp = () => {
    console.log('up')
    flag = false
  }

想要實(shí)現(xiàn)從圖片中選取一個(gè)區(qū)域，當(dāng)按下鼠標(biāo)時(shí)可以監(jiān)聽到，按著移動和松開都監(jiān)聽不到。在原地按下松開可以監(jiān)聽到。
請大家?guī)兔纯?/p>

import React from 'react'
import PropTypes from 'prop-types'
import styles from './Poster.less'

class PosterDemo extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
    }
  }

  handleMouseDown = (event) => {
    let target = event.target
    console.log('down')
    document.onmousemove = () => {
      event.preventDefault()
      console.log('move')
    }
    target.onmouseup = () => {
      console.log('up')
      document.onmousemove = null
      target.onmouseup = null
    }
  }

  render () {
    return (
      <div className={styles.posterDemo}>
        <div id="phone" className={styles.phone}>
          <div className={styles.Content}>
            <div className={styles.Image}>
              <img id="poster" alt="" src={this.props.url}
                onMouseDown={(e) => this.handleMouseDown(e)}
              />
            </div>
          </div>
        </div>
      </div>
    )
  }
}

PosterDemo.propTypes = {
  url: PropTypes.string,
}

export default PosterDemo

回答

編輯回答

舊城人

我有個(gè)提議把target.onmouseup改成document.onmouseup更好，這樣在整個(gè)頁面結(jié)束就不糊造成鼠標(biāo)離開DOM還一直亂動的情況。

2018年1月18日 11:32

編輯回答

假灑脫

首先onmousemove的對象應(yīng)該是document，其次onMouseMove和onMouseUp應(yīng)該都是寫在onMouseDown里面的
給你個(gè)拖拽的小例子吧，大致原理一樣的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
    <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
    <title>Document</title>
    <style>
        .box{
            width:100px;
            height:100px;
            background: #000;
            position: absolute;
        }
    </style>
</head>
<body>
    <div class="ccc"></div>
    <script type="text/babel">
        class Box extends React.Component{
            constructor(props){
               super(props);         
            }
            mousedown(event){
                var target = event.target;
                var disX = event.pageX - target.offsetLeft;
                var disY = event.pageY - target.offsetTop;
                var W = this.props.w-target.offsetWidth;
                var H = this.props.h-target.offsetHeight;
                document.onmousemove = function(event){
                    event.preventDefault();
                    var l = event.pageX - disX;
                    var t = event.pageY - disY;
                    if(l<0){
                        l = 0;
                    }
                    if(l>W){
                        l = W ;
                    }
                    if(t<0){
                        t = 0;
                    }
                    if(t>H){
                        t = H;
                    }
                    target.style.top = t+ 'px';
                    target.style.left = l+'px';
                }
                target.onmouseup = function(){
                    document.onmousemove = null;
                    target.onmouseup = null;
                }
            }
            render(){
                return <div className="box" onMouseDown={(e)=>this.mousedown(e)}></div>
            }
        }
        ReactDOM.render(
            <Box h={document.documentElement.clientHeight} w={document.documentElement.clientWidth}/>,
            document.querySelector('.ccc')
        )
    </script>
</body>
</html>

2017年11月22日 18:21