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

Posted 2023-01-09

最近我们观察到，当分割按钮被移动到溢出按钮下面，同时屏幕被调整大小时，分割按钮的点击处理程序没有被触发。

我遇到了这个 Github问题 其中似乎还在开放。

$(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.comaKAseZAC。

答案

根据我在该问题中的评论。

如果splitButton项目有自己的点击处理程序，它就能正常工作。

我认为更准确的描述应该是

• 当不溢出时，没有自己的处理程序的子项目会正确地继承父项目的点击处理程序。
• 的时候，这样的子程序就不会继承处理程序。

这就给了我们一个直接的解决方法：为每个子程序重新声明处理程序。

    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就会把它放在更高的优先级。