Disable scaling
One day, I worked hard to make a page with complex operation functions. After it went online, there was user feedback: many functions could not be used. Surprised, I thought there was a bug somewhere.
Immediately contacted the user, only to find out that the user used the laptop without disabling the touchpad, and then accidentally touched it, causing the entire interface to be enlarged, and many functions beyond the interface were missing.
However, what can be done, the user is the first, and naturally this problem must be solved quickly, and both the touchpad and the touch screen must be solved.
In the past, if you want to disable the function of zooming in and out with your fingers on the touch screen of the mobile device, you will think of using it viewport to deal with it. as follows:
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
However, current browsers no longer support viewport zoom-disabled definitions. Using this code now is completely invalid. To solve the problem, you have to think of a new solution.
Not much to say, the following first gives a specific solution.
touchpad
To disable the zooming behavior of the trackpad, you need to handle the mouse wheel event: wheel .
Because the two-finger slide on the notebook touchpad will respond to this event, if you prevent the default behavior for this event, you can solve the scaling problem.
Note : passive: false must be used, will be introduced below.
In addition, document after handling the scroll wheel event, because the event will propagate bubbles, you need to pay attention to other sub-elements on the page - if there is a scroll bar or the like, you need to prevent bubbling on the sub-elements, otherwise scrolling will fail .
// 触摸板禁止手指缩放
document.addEventListener('wheel', function(event) {
event.preventDefault()
}, { passive: false })
// 阻止子元素相同事件冒泡
// document.getElementById('app').addEventListener('wheel', function(event) {
// event.stopPropagation()
// })
touch screen
To disable finger zooming on the touch screen, you can use the following CSS and JS two methods.
css processing
As long as you use css styles on the page touch-action: none, you can disable the zooming of the web on mobile phones or tablets.
<html style="touch-action: none;">
Note:
When used touch-action: none on html elements, page zooming can be prohibited, because this style attribute is a non-inherited attribute and will not affect the gesture operation of page sub-elements.
If * {touch-action: none;} global action is used, it will affect various gestures of child elements.
js processing
Use js code to prohibit the finger zooming of the touch screen, which is similar to handling the touchpad. Here, it mainly monitors several gesture events, such as touchstart, touchend, touchmove, etc.
Note: The things that need to be paid attention to are the same as when the touchpad is processed, plus { passive: false }, and the child elements are prevented from bubbling.
document.addEventListener('touchstart', function(event) {
event.preventDefault()
}, { passive: false })
// 阻止子元素相同事件冒泡
// document.getElementById('app').addEventListener('touchstart', function(event) {
// event.stopPropagation()
// })
Extended Interpretation
touch-action
Non-inherited attribute, default
auto.
An area for setting how touchscreen users can manipulate elements, allowing you to control scrolling when touched.
For example, the zoom feature built into the browser.
This also has the advantage that it allows you to implement these gestures yourself.
All modern browsers support this attribute, but some attribute values are only supported by chrome.
touch-action: auto | none | [ [ pan-x | pan-left | pan-right ] || [ pan-y | pan-up | pan-down ] || pinch-zoom ] | manipulation;
touch-action attribute value
- auto
When a touch event occurs on an element, it is up to the browser to decide which operations to perform, such as smoothing and zooming the viewport. - none
When a touch event occurs on the element, do nothing. - pan-x
Enables a one-finger horizontal pan gesture. Can be combined with pan-y, pan-up, pan-down and/or pinch-zoom. - pan-y
enables a one-finger vertical pan gesture. Can be combined with pan-x, pan-left, pan-right and/or pinch-zoom.
This is an alias for manipulationpan-x pan-y pinch-zoom.
The browser only allows scrolling and continuous zooming operations, any other behavior supported by the auto value is not supported.
Enables pan and pinch zoom gestures, but disables other non-standard gestures such as double tap to zoom.
Disabling double-tap to zoom reduces the need for the browser to delay generating click events when the user taps the screen.
Touch actions are also often used to completely resolve the delay in tap events caused by supporting double-tap zoom gestures.- pinch-zoom
enables multi-finger panning and zooming of pages.
This can be combined with any translation value. - pan-left, pan-right, pan-up, pan-down
Enable one-finger gestures that start scrolling in the specified direction. Once scrolling starts, the direction may still be reversed.
Multiple directions can be combined.
Note that scrolling up (pan-up) means that the user is dragging their finger down on the screen surface, and likewise pan-left means that the user is dragging their finger to the right.
These values are less compatible, supported by Chrome, but not supported by IE\Firefox\Safari.
wheel 与 mousewheel
mousewheel It is not a standard feature, supported by browsers such as ie and chrome, but firefox not supported. firefox Supports custom DOMMouseScroll events.
wheel It is a standard feature, which is basically supported by modern browsers, and it is recommended to use wheel it instead.
Sliding with two fingers on the notebook touchpad will respond to the scroll wheel event, so you can listen to this event and disable the touchpad finger zoom interface.
But you need to pay attention to the default event of the scroll wheel. If it will cause the scrolling of the child element to fail, then you must prevent the same event from bubbling on the child element.
passive
passiveaddEventListener is an optional property that comes from the event listener function as a property value options. addEventListener The third attribute of can also take a Boolean value, indicating whether it can bubble.
It should be noted that for the third parameter, IE only supports Boolean values, not attribute objects options; and some attribute values are not supported by browsers.
target.addEventListener(type, listener, options);
options parameter
The properties available for optional parameters are as follows:
- capture: Boolean, indicating that the listener will be triggered when the event capture phase of this type propagates to the EventTarget.
- once: Boolean, indicating that the listener is called at most once after being added. If true, the listener will be automatically removed after it is called.
- signal: AbortSignal, when the abort() method of this AbortSignal is called, the listener will be removed. Safari does not support it.
- mozSystemGroup: It can only be used in XBL or Firefox' chrome. This is a Boolean, indicating that the listener is added to the system group.
- passive : Boolean, when set to true, means that the listener will never call preventDefault().
passived In fact, it tells the browser whether an event listener will be used preventDefault to prevent the default behavior, so that the browser can optimize performance. In particular, the browser optimizes the performance of page scrolling, which can make page scrolling smoother.
In Chrome, wheel / touch etc. events passive will be set to true by default, but Safari does not support it.
After adding passive the parameter to true, touchmove the event will not block the scrolling of the page (the same applies to the mouse wheel event).
If passive set to true, but listener still called preventDefault, the browser client will ignore it and throw a console warning:
Unable to preventDefault inside passive event listener invocation。
Possible errors
Unable to preventDefault inside passive event listener due to target being treated as passive.
Since the target is considered passive, there is no way to prevent the default behavior in a passive event listener.
Possible occurrence scenario: touch事件After using the mobile terminal, an error is reported when vertically panning.
Method 1: Use touch-action styles to disable the default behavior of vertical translation
touch-action: pan-y;
Method 2: During monitoring touch事件 , explicitly set it passive to false, and declare that it is not passive.
document.addEventListener('touchmove', function (event) {
event.preventDefault();
}, { passive: false });