feat(interaction): avoid multiple <rect> generation

- Enhance on event handling by mitigating event <rect> element
- Do not re-generate and re-bind events when redraw happens

Fix #1642

demo/demo.js

@@ -3016,7 +3016,9 @@ d3.select(".chart_area")
 					}
 				},
 				point: {
-					show: false
+					focus: {
+						only: true
+					}
 				}
 			},
 			style: [

src/Chart/api/tooltip.ts

@@ -90,7 +90,6 @@ const tooltip = {
 			index = args.index;
 		}
 
-		// emulate events to show
 		(inputType === "mouse" ?
 			["mouseover", "mousemove"] : ["touchstart"]
 		).forEach(eventName => {

src/ChartInternal/data/data.ts

@@ -5,6 +5,7 @@
 import CLASS from "../../config/classes";
 import {KEY} from "../../module/Cache";
 import {
+	findIndex,
 	getUnique,
 	hasValue,
 	isArray,
@@ -608,6 +609,29 @@ export default {
 			(isObjectType(dataLabels) && notEmpty(dataLabels));
 	},
 
+	/**
+	 * Get data index from the event coodinates
+	 * @param {Event} event Event object
+	 * @returns {number}
+	 */
+	getDataIndexFromEvent(event): number {
+		const $$ = this;
+		const {config, state: {inputType, eventReceiver: {coords, rect}}} = $$;
+		const isRotated = config.axis_rotated;
+
+		// get data based on the mouse coords
+		const e = inputType === "touch" ? event.changedTouches[0] : event;
+		const index = findIndex(
+			coords,
+			isRotated ? e.clientY - rect.y : e.clientX - rect.x,
+			0,
+			coords.length - 1,
+			isRotated
+		);
+
+		return index;
+	},
+
 	getDataLabelLength(min, max, key) {
 		const $$ = this;
 		const lengths = [0, 0];