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

Question

我在 FireFox 中遇到 kendo 多选的奇怪问题。

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

This Dojo shows exactly what is happening。那个道场也很瘦。您可以看到它在 Chrome 中运行良好，但 FireFox 不会触发单击事件，除非您单击多选框的右侧...

Answer 1

泰勒：

试试这个方法。

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

反过来意味着你可以让你的包装器先体验点击事件。单击的事件处理程序将启用 kendo 多选并将其自身从侦听中移除。这些动作等同于你想做的。

// 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 不会。因此，无法将点击事件设置为 multi-select 中的任何内容，或者在包装器等中......这会起作用。

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

这个 Firefox 行为，以及我刚才提到的解决方案，也在 this Whosebug answer 中进行了讨论，在我的第一个 link 的 dojo 中有一个工作示例。

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

Click event not working correctly on Kendo Multi-Select wrapper (Only in FireFox)

javascript

jquery

kendo-ui

kendo-multiselect