Chrome 和 IE 中的 stopPropagation答案

【问题标题】：stopPropagation in Chrome and IEChrome 和 IE 中的 stopPropagation
【发布时间】：2016-07-05 13:09:48
【问题描述】：

我一直无法让 stopPropagation 为我的数据视图工作。基本上问题如下；

在数据视图中选择节点，这会触发 select、selectionchange 事件
所选节点有一个带有 onClick 事件的图像，这会在弹出窗口中创建一个报告。
单击图像时，我调用 stopPropagation 以防止事件冒泡到数据视图，这会导致取消选择、选择更改事件被触发。
stopPropagation 似乎只适用于我的 Firefox。 Chrome 和 IE 似乎没有任何效果，因为取消选择了节点并触发了不需要的事件。

我在 onClick 事件上尝试了以下功能

handleBubbleEvent: function(e) {
    if (!e) {
        var e = window.event;
    }
    e.cancelBubble = true;
    e.returnValue = false;
    if (e.stopPropagation) {
        e.stopPropagation();
    }
}

也见过 stopImmediatePropagation、preventDefault、stopEvent 但这些也没有效果

我在 Ext XTemplate 中完成所有这些操作

<a href="#" title="Report" class="quicklinks journey_report" onClick="handleBubbleEvent(event); Ext.getCmp(...).generateReport(...); return false;"></a>

我想知道这是否是 ExtJS 5 的问题，并且相同的代码适用于旧版本的 ExtJS。我似乎无法阻止点击事件冒泡回到数据视图，然后触发取消选择和选择更改事件。

可能是时间/顺序问题。我在数据视图上使用 ExtJS 的 selectionchange 事件，而在 XTemplate 中我使用自己的侦听器函数？我在网上看到一些引用事件捕获/冒泡的东西，因为我不是网络开发人员，所以我在这方面苦苦挣扎。

更新：我现在正在查看事件和捕获/冒泡，似乎捕获正在上升到父级并调用取消选择、选择更改然后进入实际的单击处理程序，此时我调用 stopPropagation 但为时已晚阶段。着眼于使用目标/委托设置为 selectionchange 创建我自己的侦听器，以便仅在 class != 'some class' 时调用它，然后在 'some class' 上单击以处理我想要的内容并停止传播，如果这样的话感觉！

【问题讨论】：

事件处理程序本身也应该返回 false。
我应该补充一点，onClick 代码位于 Ext.XTemplate 中，所以它看起来像这样； onClick=handleBubbleEvent(事件); Ext.getCmp(...).generateReport(...);返回假；

标签： javascript google-chrome internet-explorer extjs5

【解决方案1】：

尝试对 event.target 元素的事件处理程序触发的任何 dom 操作使用 setTimeout，以便在任何 dom 操作发生之前完成事件冒泡。

我在 Chrome 上遇到了同样的问题，并且（和你一样）Firefox 工作正常。我发现如果您在事件冒泡完成之前修改 dom，Chrome 似乎会感到困惑。

在我的例子中，我向 document.body 添加了两个元素（一个画布和一个字段集），当 chrome 冒泡事件时， event.target 不正确（它认为“BODY”是 event.target .tagName——错误！）。我将 DOM 操作部分包装在 setTimeout 中，如下所示：

    setTimeout(()=>
    {
        document.body.appendChild(canvas);
        document.body.appendChild(fieldSet);            
    },0);

在此之后，chrome 开始在冒泡体点击事件上报告正确的 element.target。也许同样的技术可以帮助您在 dom 操作发生之前让 e.stopPropagation() 完成它的工作。

【讨论】：