如何限制一个元素的范围？

Question

我正在 React JS 中构建一个滑块组件，它正在运行，但是我遇到了一个错误，我认为这是 onMouseDown 和 onMouseLeave 事件之间的冲突。

我有 div range-container，它接收事件，在它里面我有另一个 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;
}

我该如何解决这个问题？

Answer 1

使用 mouseout 而不是 mouseleave 似乎更成功。 mouseleave 函数永远不会被调用然后点击被保留。您可以在此处查看此代码：https://codesandbox.io/s/inspiring-edison-63s0h?file=/src/App.js

Answer 2

我不能靠事件来达到我的目的，所以我不得不稍微改变一下视角。

我所做的是将拇指的初始位置存储在一个变量中，只有当它高于初始值时才更改value，否则value接收到[=13的值=].

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)
    }
    
}

现在可以正常使用了。

如何限制一个元素的范围？

How to limit the range of an element?

javascript

html

css

reactjs

mouseevent