点击事件在Kendo Multi-Select包装器上无法正常工作（仅限FireFox）

Question

我在FireFox中使用剑道多选进行了一个奇怪的问题。

我在div中包含一个multiselect，然后将click事件附加到该div包装器。因此，当用户单击multiselect（div包装器）时，将触发click事件，并启用multiselect（最初禁用）。这在Chrome中运行良好。但是在FireFox中，只有单击div包装器右侧时才会触发click事件，就像我附加的图片一样。在Chrome中，如果您点击多选中的任意位置，则点击事件会正确触发...

This Dojo shows exactly what is happening。道场也做同样的事。您可以看到它在Chrome中运行良好，但FireFox不会触发点击事件，除非您点击多重选择的右侧...

Answer 1

泰勒：

尝试这种方法。

标准JavaScript事件冒泡，这意味着事件从最内层元素传播到最外层元素。您可以通过安装useCapture参数设置为true的自定义事件侦听器来强制执行相反的操作。请参阅addEventListener。

反过来意味着您可以让包装器首先体验点击事件。单击的事件处理程序将启用kendo multiselect并将其自身从侦听中删除。这些行动将等同于您想要做的事情。

// function that turns on multiselect and then removes itself from listening
function multiselectEnabler() {
    $('#multiSelector').data('kendoMultiSelect').enable(true);
    $('#multiSelectWrapper')[0].removeEventListener( 'click', multiselectEnabler );
}

$('#multiSelectWrapper')[0].addEventListener( 'click', multiselectEnabler, true);

/* Your original code that is no longer needed  
$('#multiSelectWrapper').on('click', function(){
  kendoConsole.log('Activating MultiSelect');
    $('#multiSelector').data('kendoMultiSelect').enable(true);
});
$('#multiSelectWrapper input.k-input').on('click', function(){
    kendoConsole.log('Clicking on multiSelect');
});
*/

Answer 2

我终于找到了解决这个问题的方法。它可以找到In this dojo。我发现大多数浏览器会在禁用的元素上通过DOM树传播事件，但Firefox不会。因此，没有办法将click事件设置为多选中的任何内容，或者在包装器上等等......这本来有用。

要使其工作，您需要在包装器中添加一个额外的div，就像在dojo中一样。您将包装器设置为substitute()并将包装器中包含的额外div（也包含多选）添加到position: relative，然后在“禁用”和“启用”时显示并隐藏额外的div多选（或您要启用的任何禁用元素）。

我在this Stackoverflow answer中讨论了这种Firefox行为以及我刚才提到的解决方案，并在第一个链接中的dojo中提供了一个工作示例。