Fix #9649 (on click, clear, throw error)

src/echarts.js

@@ -1508,7 +1508,7 @@ var MOUSE_EVENT_NAMES = [
  */
 echartsProto._initEvents = function () {
     each(MOUSE_EVENT_NAMES, function (eveName) {
-        this._zr.on(eveName, function (e) {
+        var handler = function (e) {
             var ecModel = this.getModel();
             var el = e.target;
             var params;
@@ -1577,8 +1577,14 @@ echartsProto._initEvents = function () {
 
                 this.trigger(eveName, params);
             }
-
-        }, this);
+        };
+        // Consider that some component (like tooltip, brush, ...)
+        // register zr event handler, but user event handler might
+        // do anything, such as call `setOption` or `dispatchAction`,
+        // which probably update any of the content and probably
+        // cause problem if it is called previous other inner handlers.
+        handler.zrEventfulCallAtLast = true;
+        this._zr.on(eveName, handler, this);
     }, this);
 
     each(eventActionMap, function (actionType, eventType) {

test/tooltip-setOption.html

@@ -48,13 +48,13 @@ under the License.
         <div><a target="_blank" href="dynamicData.html">dynamicData.html</a></div>
         <div><a target="_blank" href="dynamicData2.html">dynamicData2.html</a></div>
         <div><a target="_blank" href="dynamicData3.html">dynamicData3.html</a></div>
-        <h1>triggerOn click setOption when trigger axis (keep show)</h1>
-        <!-- <div class="chart" id="click-setOption1"></div> -->
+        <h1>triggerOn: click, setOption when trigger axis (keep show)</h1>
+        <div class="chart" id="click-setOption1"></div>
 
 
         <h1>tooltip should auto show and auto disappear when setOption(..., {notMerge: true})</h1>
-        <div class="chart" id="setOption2">
-        </div>
+        <div class="chart" id="setOption2"></div>
+        <div class="chart" id="setOption3"></div>
 
 
 
@@ -180,5 +180,59 @@ under the License.
 
 
 
+
+
+
+        <script>
+            require(['echarts'], function (echarts) {
+                var colors = ['red', 'blue'];
+                var option = {
+                    color: colors,
+                    "tooltip": {
+                        "show": true
+                    },
+                    "xAxis": {
+                        "type": "category",
+                        "data": ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+                    },
+                    "yAxis": {
+                    },
+                    "series": [{
+                        "data": [820, 932, 901, 934, 1290, 1330, 1320],
+                        "type": 'bar'
+                    }, {
+                        "data": [620, 532, 501, 734, 1090, 1130, 1220],
+                        "type": 'bar'
+                    }]
+                };
+
+                var myChart = testHelper.create(echarts, 'setOption3', {
+                    title: 'Click the blue bar, should no error throw',
+                    option: option
+                });
+
+                myChart.on('click', function (params) {
+                    myChart.clear();
+                    myChart.setOption({
+                        "tooltip": {
+                            "show": true
+                        },
+                        "xAxis": {
+                            "type": "category",
+                            "data": ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+                        },
+                        "yAxis": {
+                        },
+                        "series": [{
+                            "data": [820, 932, 901, 934, 1290, 1330, 1320],
+                            "type": 'bar'
+                        }]
+                    });
+                });
+            });
+
+        </script>
+
+
     </body>
 </html>
\ No newline at end of file