Bug: how to preventDefault in touchmove

[this-spring]

React version:
17.0.2

Steps To Reproduce

I want the parent element to not scroll when the child element is scrolled

jsx

const App = () => {
        const styleObj = {
             height: "200vh",
             "background-image": "linear-gradient(rgb(255, 255, 255), rgb(170, 0, 0))"
        }
        function touchMove(event) {
            event.nativeEvent.preventDefault();
        }
        return (
          <div id="parent" style={ styleObj }>
             <div id="child" onTouchMove={touchMove} className="r">
             </div>
          </div>
      );
}

css:

.r {
  position: fixed;
  top: 200px;
  left: 0;
  z-index: 10;
  width: 100%;
  height: 300px;
  background-color: black;
}

When I scroll the child in mobile mode, the outer layer will follow.

Link to code example:
App.js

App.css

The current behavior

the parent scroll when child is touchmove.

The expected behavior

the parent not scroll when child is touchmove.

I saw this issues(https://github.com/facebook/react/issues/19651)， I have two questions:

1. I'm not sure if react 18 fixed it？
2. How do I deal with this case?

[factscub]

i want to work on this issue. please assign this to me.

[this-spring]

so, it is a bug?
How do I deal with this case?

[makc]

@this-spring not a bug, but "by design" as per #19651
unfortunately they dont seem to care about preventDefault-s not working
so the work-around is to not use react's onXxx and instead do addEventListener with { passive: false } as per #20999

[this-spring]

okk thanks

[github-actions]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!