fix(runtime): 修复 react 事件冒泡问题，fix #8041

NervJS · May 31, 2022 · a277e8d · a277e8d
1 parent 4faf089
commit a277e8d
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 13 deletions.
diff --git a/packages/taro-react/src/props.ts b/packages/taro-react/src/props.ts
@@ -1,5 +1,5 @@
-import { TaroElement, Style, FormElement } from '@tarojs/runtime'
-import { isFunction, isString, isObject, isNumber, internalComponents, capitalize, toCamelCase } from '@tarojs/shared'
+import { FormElement, Style, TaroElement } from '@tarojs/runtime'
+import { capitalize, internalComponents, isFunction, isNumber, isObject, isString, toCamelCase } from '@tarojs/shared'
 
 export type Props = Record<string, unknown>
 
@@ -45,14 +45,11 @@ function setEvent (dom: TaroElement, name: string, value: unknown, oldValue?: un
   }
 
   if (isFunction(value)) {
-    if (!oldValue) {
-      dom.addEventListener(eventName, value, isCapture)
-    }
-    if (eventName === 'regionchange') {
-      dom.__handlers.begin[0] = value
-      dom.__handlers.end[0] = value
+    if (oldValue) {
+      dom.removeEventListener(eventName, oldValue as any, false)
+      dom.addEventListener(eventName, value, { isCapture, sideEffect: false })
     } else {
-      dom.__handlers[eventName][0] = value
+      dom.addEventListener(eventName, value, isCapture)
     }
   } else {
     dom.removeEventListener(eventName, oldValue as any)

diff --git a/packages/taro-runtime/src/dom/element.ts b/packages/taro-runtime/src/dom/element.ts
@@ -1,4 +1,4 @@
-import { EMPTY_OBJ, hooks, isArray, isFunction, isString, isUndefined, Shortcuts, toCamelCase, warn } from '@tarojs/shared'
+import { EMPTY_OBJ, hooks, isArray, isFunction, isObject, isString, isUndefined, Shortcuts, toCamelCase, warn } from '@tarojs/shared'
 
 import {
   CATCH_VIEW,
@@ -314,7 +314,13 @@ export class TaroElement extends TaroNode {
     const name = this.nodeName
     const SPECIAL_NODES = hooks.call('getSpecialNodes')!
 
-    if (!this.isAnyEventBinded() && SPECIAL_NODES.indexOf(name) > -1) {
+    let sideEffect = true
+    if (isObject<Record<string, any>>(options) && options.sideEffect === false) {
+      sideEffect = false
+      delete options.sideEffect
+    }
+
+    if (sideEffect !== false && !this.isAnyEventBinded() && SPECIAL_NODES.indexOf(name) > -1) {
       this.enqueueUpdate({
         path: `${this._path}.${Shortcuts.NodeName}`,
         value: name
@@ -324,13 +330,13 @@ export class TaroElement extends TaroNode {
     super.addEventListener(type, handler, options)
   }
 
-  public removeEventListener (type, handler) {
+  public removeEventListener (type, handler, sideEffect = true) {
     super.removeEventListener(type, handler)
 
     const name = this.nodeName
     const SPECIAL_NODES = hooks.call('getSpecialNodes')!
 
-    if (!this.isAnyEventBinded() && SPECIAL_NODES.indexOf(name) > -1) {
+    if (sideEffect !== false && !this.isAnyEventBinded() && SPECIAL_NODES.indexOf(name) > -1) {
       this.enqueueUpdate({
         path: `${this._path}.${Shortcuts.NodeName}`,
         value: isHasExtractProp(this) ? `static-${name}` : `pure-${name}`

diff --git a/packages/taro-runtime/src/dom/event-target.ts b/packages/taro-runtime/src/dom/event-target.ts
@@ -58,6 +58,14 @@ export class TaroEventTarget {
 
   public removeEventListener (type: string, handler: EventHandler) {
     type = type.toLowerCase()
+
+    if (type === 'regionchange') {
+      // map 组件的 regionchange 事件非常特殊，详情：https://github.com/NervJS/taro/issues/5766
+      this.removeEventListener('begin', handler)
+      this.removeEventListener('end', handler)
+      return
+    }
+
     if (!handler) {
       return
     }