如何限制元素的范围？

问题描述

我正在React React JS中构建一个滑块组件，并且可以正常工作，但是我遇到了一个错误，我认为这是onMouseDown和onMouseLeave事件之间的冲突。

我有一个div range-container，它接收事件，在里面有另一个div，在最后一个div中，我有两个范围，它们是滑块的拇指。

正在发生的事情：

在此gif文件中可以看到，拇指没有遵守行的限制。左侧的数据是变量move，负责确定X是否可以更改以及鼠标的位置。

这是应该如何工作的：

onMouseDown将move设置为true，并允许拇指移动；

onmouseup将move设置为false并阻止移动；

onMouseMove更改value的值并使拇指移动；

onMouseLeave将move设置为false，并阻止移动。

我意识到onMouseLeave仅在光标离开元素及其子元素时触发，因为我不能只离开div，也需要离开拇指，但我没有知道如何通过行的限制来限制它。

这是我的组成部分：

import React,{ Fragment } from 'react'

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

import './Filter.css'

const Filter = props => {

    let [value,setValue] =  React.useState(190)
    let [move,setMove] =  React.useState(false)

    const handleChange = e => {
        var x = e.clientX;
        if (move === true) {
            setValue(x)
        }
        
    };
    
    const moveOn = e => {
        var x = e.clientX;
        setValue(x)
        setMove(true)
    }
    
    const moveOff = () => {
        setMove(false)
    }
    

    let moveText = 'false'
    move === true ? moveText = 'true' : moveText = 'false'

    return (
        <Fragment>
            <div>{moveText}</div>
            <div>{value}</div>
            <div className="filter-container d-flex justify-content-between">
                    
                    <div className="range-container"
                        onMouseMove={(e) => handleChange(e)}
                        onMouseDown={(e) => moveOn(e)}
                        onmouseup={() => moveOff()}
                        onMouseLeave={() => moveOff()}
                    >
                        <div className="range" 
                            
                        >
                            <span className="rounded-circle" 
                                style={{
                                    width:'15px',height: '15px',backgroundColor: 'red',marginTop: '-6px',left: value - 7 + 'px'
                                }}
                                ></span>
                            <span className="rounded-circle" 
                                style={{
                                    width:'10px',height: '10px',backgroundColor: 'black',marginTop: '-4px',marginLeft: '195px'
                                }}
                                
                                ></span>
                        </div>
                    </div>
            </div>
        </Fragment>
    )
}

export default Filter

CSS：

.range-container {
    width: 200px;
    height: 15px;
    cursor: pointer;
}

.range {
    width: 100%;
    height: 2px;
    background-color: black;
    margin-bottom: 50px;
}

.range span {
    width: 10px;
    height: 10px;
    position: absolute;
}

我该如何解决？

解决方法

当使用mouseout而不是mouseleave时，我似乎获得了更大的成功。永远不会调用mouseleave函数，然后保持点击。您可以在此处检查此代码：https://codesandbox.io/s/inspiring-edison-63s0h?file=/src/App.js

,

我不能依靠这些事件来达到我的目标，所以我不得不改变一些看法。

我所做的是将拇指的初始位置存储在变量中，并且仅在其高于初始值时才更改value，否则value会收到off_x的值

const off_x = 190 // initial position
let [value,setValue] =  React.useState(off_x)
let [move,setMove] =  React.useState(false)


const handleChange = e => {
    var x = e.clientX;
    if (move === true) {
        value > off_x ? setValue(x) : setValue(off_x)
    }
    
}

现在它可以正常工作了。