ASP.NET VB中使用addEventListener调用Matt日历弹窗失效问题求助

你修改后的代码存在4个核心错误：

• 脚本加载顺序错误：Popup.js依赖CalendarPopup构造函数，你把Popup.js放在CalendarPopup.js之前加载，执行代码时CalendarPopup还未定义，直接抛出JS错误。
• 锚点ID不匹配：cal.select方法的第二个参数是日历弹窗的锚点元素ID，你将a标签ID从原有的aFrom改成了selCalendar，传参仍然写aFrom，组件找不到锚点元素无法渲染弹窗。
• 默认行为阻止逻辑失效：addEventListener绑定的回调函数中return false不会阻止a标签的默认跳转行为，需要主动调用事件对象的preventDefault方法。
• 实例初始化时机错误：原有逻辑是全局初始化单实例，你改为每次点击才初始化实例，不符合组件的设计使用习惯。

1. 调整aspx代码 #

调整脚本加载顺序，先加载CalendarPopup.js再加载Popup.js，保留原有文本框控件：

<script type="text/javascript" src="../../Content/Scripts/CalendarPopup.js"></script>
<script type="text/javascript" src="../../Content/Scripts/Popup.js"></script>

<asp:TextBox ID="txtRequestDate" runat="server" MaxLength="10" Style="width: 70px; height: 15px;border: 1px solid silver;"></asp:TextBox>
<a href="#" id="selCalendar">Select</a>

2. 调整Popup.js代码 #

// 全局初始化日历实例，和原有兼容IE的逻辑一致
var cal = null;
document.addEventListener('DOMContentLoaded', function () {
    cal = new CalendarPopup();
    document.getElementById("selCalendar").addEventListener("click", showCalendar, false);
});

function showCalendar(e) {
    // 阻止a标签默认跳转行为
    e.preventDefault();
    // 第二个参数替换为当前触发元素的ID selCalendar
    cal.select(window.document.forms['frmMain'].txtRequestDate,'selCalendar','dd/MM/yyyy');
}

可选排查优化点 #

如果修复后仍然报错，可优先检查以下两点：

• 打开Chrome开发者工具的控制台面板，查看是否有明确的JS报错，比如表单ID不是frmMain、文本框客户端ID被ASP.NET修改等问题。
• 如果文本框是放在母版页、用户控件等容器中，渲染后的ID会发生变化，可将文本框的获取逻辑替换为document.getElementById('<%= txtRequestDate.ClientID %>')适配服务端控件的客户端ID变化。

内容的提问来源于stack exchange，提问作者Tracer1