How do I prevent the default behavior of touchmove events in a Vue project?

Today, write a mobile page, using a pop-up drop-down box, and the contents of the drop-down box can be scrollable. The problem is that when you scroll the drop-down box, the underlying body scrolls along with it. I looked up the method on the Internet, and one of them is to bind @ touchmove.prevent to the drop-down box to cancel the default behavior of the event. However, in actual use, debugging with chrome found that the console reported an error, indicating that you cannot cancel the default behavior that the passive value is the true event. Do you have any good solutions? Can vue only set its value to true, through the .passive event modifier but not change the passive default value from true to false?? Can you only set the passive value with native js binding events?

Html5 css javascript front-end vue.js

Aug.02,2021

just stop bubbling

one way is to set the html style to

overflow: hidden;
height: 100%;
position: fixed;

prevents penetration and elastic scrolling of ios

after reading the answer from upstairs, I think it is troublesome and has compatibility problems to use js to control it.

it would be better to solve the problem directly through css overflow:hidden or not.

passive is the third parameter of addeventEvent, which can optimize scrolling on mobile phone.
when passive is true, you tell the browser when you register and do not block the browser's default event, so if you try to block the browser's default event in the event you register, the console will report an error.
some browsers, especially Chrome and Firefox, have changed the default value of the passive option for touchstart and touchmove events to true. So don't go to preventDefault

at this time.

Previous: Find a paged query statement of mysql

Next: Why is the data not displayed completely in highstock