refactor(interaction): Enhance touch event handling with passive options

- Updated touch event bindings to use passive options for improved performance.

Ref #4055

Author: netil

src/ChartInternal/ChartInternal.ts

@@ -423,7 +423,8 @@ export default class ChartInternal {
 
 			$el.svg
 				.on("click", onclick?.bind($$.api) || null)
-				.on(isTouch ? "touchstart" : "mouseenter", onover?.bind($$.api) || null)
+				.on(isTouch ? "touchstart" : "mouseenter", onover?.bind($$.api) || null,
+					isTouch ? {passive: true} : undefined)
 				.on(isTouch ? "touchend" : "mouseleave", onout?.bind($$.api) || null);
 		}
 

src/ChartInternal/interactions/eventrect.ts

@@ -125,6 +125,10 @@ export default {
 		const preventThreshold = (!isNaN(preventDefault) && preventDefault) || null;
 		let startPx;
 
+		// Determine passive option based on preventDefault setting
+		// If preventDefault is needed, passive must be false
+		const passiveOption = !isPrevented && preventThreshold === null;
+
 		const preventEvent = event => {
 			const eventType = event.type;
 			const touch = event.changedTouches[0];
@@ -156,7 +160,7 @@ export default {
 			.on("touchstart", event => {
 				state.event = event;
 				$$.updateEventRect();
-			})
+			}, {passive: passiveOption})
 			.on("touchstart.eventRect touchmove.eventRect", event => {
 				state.event = event;
 
@@ -174,7 +178,7 @@ export default {
 				} else {
 					unselectRect();
 				}
-			}, true)
+			}, {passive: passiveOption})
 			.on("touchend.eventRect", event => {
 				state.event = event;
 
@@ -183,7 +187,7 @@ export default {
 						state.cancelClick && (state.cancelClick = false);
 					}
 				}
-			}, true);
+			}, {passive: passiveOption});
 
 		svg.on("touchstart", event => {
 			state.event = event;
@@ -192,7 +196,7 @@ export default {
 			if (target && target !== eventRect.node()) {
 				unselectRect();
 			}
-		});
+		}, {passive: passiveOption});
 	},
 
 	/**

src/ChartInternal/internals/tooltip.ts

@@ -591,7 +591,6 @@ export default {
 			// hide tooltip
 			tooltip
 				.style("display", "none")
-				.style("visibility", "hidden") // for IE9
 				.datum(null);
 
 			callFn(config.tooltip_onhidden, api, selectedData);

src/ChartInternal/shape/arc.ts

@@ -1185,7 +1185,7 @@ export default {
 					$$.callOverOutForTouch(arcData);
 
 					isUndefined(id) ? unselectArc() : selectArc(this, arcData, id);
-				});
+				}, {passive: true});
 		}
 	},
 

src/ChartInternal/shape/funnel.ts

@@ -232,7 +232,7 @@ export default {
 						$$.showTooltip([data], event.target);
 						/^(touchstart|mouseover)$/.test(event.type) && $$.setOverOut(true, data);
 					}
-				})
+				}, isTouch ? {passive: true} : undefined)
 				.on(isTouch ? "touchend" : "mouseout", event => {
 					const data = getTarget(event);
 

src/ChartInternal/shape/radar.ts

@@ -373,11 +373,11 @@ export default {
 
 				$$.selectRectForSingle(svg.node(), index);
 				isMouse ? $$.setOverOut(true, index) : $$.callOverOutForTouch(index);
-			})
+			}, isMouse ? undefined : {passive: true})
 			.on("mouseout", isMouse ? hide : null);
 
 		if (!isMouse) {
-			svg.on("touchstart", hide);
+			svg.on("touchstart", hide, {passive: true});
 		}
 	},
 

src/ChartInternal/shape/treemap.ts

@@ -144,7 +144,7 @@ export default {
 						$$.showTooltip([data], event.currentTarget);
 						/^(touchstart|mouseover)$/.test(event.type) && $$.setOverOut(true, data);
 					}
-				})
+				}, isTouch ? {passive: true} : undefined)
 				.on(isTouch ? "touchend" : "mouseout", event => {
 					const data = getTarget(event);
 

src/config/Options/interaction/interaction.ts

@@ -17,7 +17,8 @@ export default {
 	 * @property {boolean} [interaction.brighten=true] Make brighter for the selected area (ex. 'pie' type data selected area)
 	 * @property {boolean} [interaction.inputType.mouse=true] enable or disable mouse interaction
 	 * @property {boolean} [interaction.inputType.touch=true] enable or disable  touch interaction
-	 * @property {boolean|number} [interaction.inputType.touch.preventDefault=false] enable or disable to call event.preventDefault on touchstart & touchmove event. It's usually used to prevent document scrolling.
+	 * @property {boolean|number} [interaction.inputType.touch.preventDefault=false] enable or disable to call event.preventDefault on touchstart & touchmove event. It's usually used to prevent document scrolling.<br>
+	 * - **NOTE**: When `true` is set, touch events are bound with [`{passive: false}`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#using_passive_listeners) option.
 	 * @property {boolean} [interaction.onout=true] Enable or disable "onout" event.<br>
 	 * 		When is disabled, defocus(hiding tooltip, focused gridline, etc.) event won't work.
 	 * @see [Demo: touch.preventDefault](https://naver.github.io/billboard.js/demo/#Interaction.PreventScrollOnTouch)