Kendo UI datetimepicker - 选择 previous/next 月份时调用 onclick 函数

Question

我想在用户点击 Kendo UI 日期时间选择器上的 previous/next 月份按钮时触发点击事件。

documentation 告诉我发生这种情况时没有触发事件，所以我需要制作一个点击事件。

按钮没有 ID，但有唯一的类：k-nav-prev 用于上个月按钮，k-nav-next 用于下个月按钮。

但是，当我尝试为那些类的单击事件设置警报时，没有任何反应。谁知道我做错了什么，或者是否有更好的方法在单击这些按钮时触发事件？

我附上了代码示例。感谢您的帮助。

$(document).ready(function() {
  // create DateTimePicker from input HTML element
  $("#datetimepicker").kendoDateTimePicker({
    value: new Date(),
    dateInput: true
  });

  $(".k-nav-prev").click(function() {
    alert("previous month button clicked");
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
    <base href="https://demos.telerik.com/kendo-ui/datetimepicker/index">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.3.1118/styles/kendo.default-v2.min.css" />

    <script src="https://kendo.cdn.telerik.com/2020.3.1118/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2020.3.1118/js/kendo.all.min.js"></script>
</head>

<body>
        <div id="example">
            <div class="demo-section k-content">
                <h4>Remind me on</h4>
                <input id="datetimepicker" title="datetimepicker" style="width: 100%;" />
            </div>
            <p id="test">
              Hello world
            </p>
        </div>
</body>
</html>

Answer 1

问题是 Kendo 已经绑定到对这些链接的点击并拦截它们。您需要使用 capture 才能很好地捕获事件。

下面的代码可以做到这一点，但有时它会捕获对 a.k-nav-prev 元素的点击，有时会捕获对 span 元素的点击，其中包含图标：

document.addEventListener('click', function(e) {
  console.log(e);
  if (!e.target.classList.contains("k-nav-prev") && !e.target.parentNode.classList.contains("k-nav-prev")) {
    return;
  }
  console.log("Do your thing here");
}, true);

演示：https://dojo.telerik.com/@GaloisGirl/etEwOYEp

更多关于 capture 的信息：https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

Kendo UI datetimepicker - 选择 previous/next 月份时调用 onclick 函数

KendoUI datetime picker - Calling an on click function when previous/next month is selected

javascript

html

jquery

kendo-ui

datetimepicker