Kendo UI 日期时间选择器 - 选择上/下个月时调用 onclick 函数
Posted
技术标签:
【中文标题】Kendo UI 日期时间选择器 - 选择上/下个月时调用 onclick 函数【英文标题】：KendoUI datetime picker - Calling an on click function when previous/next month is selected 【发布时间】：2021-03-09 20:19:06 【问题描述】：我想在用户单击 Kendo UI 日期时间选择器上的上/下个月按钮时触发点击事件。
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>【问题讨论】：
【参考方案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 日期时间选择器 - 选择上/下个月时调用 onclick 函数的主要内容，如果未能解决你的问题，请参考以下文章