Question

我需要停止传播事件，中止整个文档的hover行为。我创建了一个简单的Test组件，在整个文档中调用mousemove处理程序：

import React, { Component } from "react";

import "./Test.css";

class Test extends Component {

    state = {
        posX: 0,
        posY: 0
    }

    componentWillMount = () => {
        document.addEventListener("mousemove", this.handleMouseMove, false);
    };

    componentWillUnmount = () => {
        document.removeEventListener("mousemove", this.handleMouseMove, false);
    };

    handleMouseMove = event => {

        this.setState ({
            posX: event.pageX,
            posY: event.pageY
        })

        event.preventDefault();
        event.stopPropagation();
    };

    render = () => {
        return (
            <div className="container">
                <div className="content">
                    <h1>Pos X: {this.state.posX}</h1>
                    <h1>Pos Y: {this.state.posY}</h1>
                </div>
            </div>
        );
    };
}

export default Test;

我的Test.css：

.container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
}

.content {
    width: 100%;
    text-align: right;
}

.content:hover {
    background-color: green;
}

上面的示例代码正在运行at here - 请检查Test.js组件。

我希望代码不要悬停，因为我在mousemove事件处理程序上调用stopPropagation/preventDefault，但仍然会出现悬停效果（绿色绘画）。

如何禁用悬停效果？可以通过javascript函数完成吗？

在鼠标移动事件中停止在文档上悬停传播

0 个答案: