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

Posted 2021-05-03

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

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

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

答案

泰勒：

试试这种方法。

标准javascript事件冒泡，这意味着事件从最内层元素传播到最外层元素。您可以通过安装自定义事件侦听器来强制反向，并将useCapture参数设置为true。见addEventListener。

反过来意味着您可以使包装器首先体验click事件。单击的事件处理程序将启用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');
});
*/

另一答案

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

要使其工作，您需要在包装器中添加一个额外的div，就像在dojo中一样。你将包装器设置为position: relative和你的包装器中包含的额外div（也包含多选）到position:absolute; left: 0; right: 0; top: 0; bottom: 0;然后你显示并隐藏那个额外的div，因为你'禁用'和'启用'多选（或任何禁用）你要启用的元素）。

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