Question

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

在数据视图中选择节点，这会触发select，selectionchange events
所选节点的图像带有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中我使用自己的监听器函数？我在网上看到的东西引用了事件的捕获/冒泡，而且我不是网络开发者，我在这方面苦苦挣扎。

更新：我现在正在查看事件和捕获/冒泡，似乎捕获正在向父进行并调用deselect，selectionchange然后进入实际的单击处理程序，此时我调用stopPropagation但为时已晚在这个阶段。看看为目标/委托设置创建我自己的选择更改的监听器，以便只在课时调用它！=＆＃39;某些类＆＃39;然后是某个班级的聆听者。点击以处理我想要的和停止传播，如果这有任何意义！

Answer 1

我不认为这与stopPropagation()有任何关系，而是我相信你确实在点击时改变了“选择”，因此事件正在解雇。您的选择类似于:focus中的内容，点击某些内容会改变这一点。我建议一个解决方法，包括在selectionchange事件中查看事件的目标，并决定从那里做什么。

document.addEventListener("selectionchange", function(e) {        
    if ((e.target.className).indexOf(".image") > -1) {
        return false;
    } else {
        ...
    }
}, false);

此示例假设单击的图像（在您指向的点击时触发事件的图像）具有类“.image”。另一个可能更有效的替代方案（从逻辑上讲）将是：

document.addEventListener("selectionchange", function(e) {        
    if (!((e.target.className).indexOf(".image") > -1)) {
        // Your original code
    }
}, false);

Answer 2

尝试在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开始在冒泡的body click事件中报告正确的element.target。也许这种相同的技术可以帮助你在dom操作发生之前让e.stopPropagation（）做它的事情。

在Chrome和IE中停止传播

2 个答案: