在调整屏幕大小时移动到溢出按钮时，工具栏中的 SplitButton 不会触发单击处理程序

Question

最近我们观察到，当拆分按钮在溢出按钮下方移动时，同时调整屏幕大小时，拆分按钮的点击处理程序未被触发。当它不在溢出按钮中时它工作正常。

我遇到了这个 Github issue，它似乎还在营业。

$(document).ready(function() {
  $("#toolbar").kendoToolBar({
    items: [{
      type: "button",
      text: "Button"
    }, {
      type: "button",
      text: "Toggle Button",
      togglable: true
    }, {
      type: "splitButton",
      text: "Insert",
      click: splitButtonClickHandler,
      menuButtons: [{
        text: "Insert above",
        icon: "insert-up"
      }, {
        text: "Insert between",
        icon: "insert-middle"
      }, {
        text: "Insert below",
        icon: "insert-down"
      }]
    }, {
      type: "separator"
    }, {
      template: "<label for='dropdown'>Format:</label>"
    }, {
      template: "<input id='dropdown' style='width: 150px;' />",
      overflow: "never"
    }, {
      type: "separator"
    }, {
      type: "buttonGroup",
      buttons: [{
        icon: "align-left",
        text: "Left",
        togglable: true,
        group: "text-align"
      }, {
        icon: "align-center",
        text: "Center",
        togglable: true,
        group: "text-align"
      }, {
        icon: "align-right",
        text: "Right",
        togglable: true,
        group: "text-align"
      }]
    }, {
      type: "buttonGroup",
      buttons: [{
        icon: "bold",
        text: "Bold",
        togglable: true
      }, {
        icon: "italic",
        text: "Italic",
        togglable: true
      }, {
        icon: "underline",
        text: "Underline",
        togglable: true
      }]
    }, {
      type: "button",
      text: "Action",
      overflow: "always"
    }, {
      type: "button",
      text: "Another Action",
      overflow: "always"
    }, {
      type: "button",
      text: "Something else here",
      overflow: "always"
    }]
  });

  $("#dropdown").kendoDropDownList({
    optionLabel: "Paragraph",
    dataTextField: "text",
    dataValueField: "value",
    dataSource: [{
        text: "Heading 1",
        value: 1
      },      {
        text: "Heading 2",
        value: 2
      },      {
        text: "Heading 3",
        value: 3
      },      {
        text: "Title",
        value: 4
      },      {
        text: "Subtitle",
        value: 5
      }    ]
  });
});

function splitButtonClickHandler(e) {
  alert('triggered')
  console.log(e, 'triggered')
}

html {
  font-size: 14px;
  font-family: Arial, Helvetica, sans-serif;
}

<base href="https://demos.telerik.com/kendo-ui/toolbar/index">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.406/styles/kendo.default-v2.min.css" />
<script src="https://kendo.cdn.telerik.com/2020.1.406/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.1.406/js/kendo.all.min.js"></script>
<div id="example">
  <div class="demo-section k-content wide">
    <div id="toolbar"></div>
  </div>

Dojo 重现问题：https://dojo.telerik.com/aKAseZAC

Answer 1

根据我在那个问题上的评论：

It works fine if the splitButton items have their own click handlers defined.

I think a more accurate description would be:

when not overflown, the children without their own handler properly inherit the click handler from the parent

when overflown, such children don't inherit the handler.

这给了我们一个直接的解决方法：re-declare 每个 child 的处理程序：

{
    type: "splitButton",
    text: "Insert",
    click: splitButtonClickHandler,
    menuButtons: [
        { text: "Insert above", icon: "insert-up", click: splitButtonClickHandler },
        { text: "Insert between", icon: "insert-middle", click: splitButtonClickHandler },
        { text: "Insert below", icon: "insert-down", click: splitButtonClickHandler }
    ]
}

也可以随意在 GitHub 上对问题进行投票或评论，以便 Telerik 将其排在更高的优先级。

在调整屏幕大小时移动到溢出按钮时，工具栏中的 SplitButton 不会触发单击处理程序

SplitButton in toolbar not triggering click handler when moved to overflow button while resizing screen

jquery

kendo-ui