从组件角度禁用事件单击

Posted 2023-03-13

【中文标题】从组件角度禁用事件单击

【英文标题】：Disable event click from component angular

【发布时间】：2020-01-06 16:29:54

【问题描述】：

我正在使用链接上的组件：https://ej2.syncfusion.com/angular/documentation/api/calendar/

我找不到任何禁用组件状态的函数或属性，因此我无法在日历上选择日期。

出于这个原因，我想知道是否可以删除点击事件，使其无法在给定情况下选择日期。

我只能禁用他无法选择的日期，只有我无法显示我在日程表中手动输入的选定日期。

是否可以从 DOM 中删除事件，使其无法对组件执行任何操作？我该怎么做？

【问题讨论】：

你能不听onChange事件并检查EmitType<ChangedEventArgs> == MouseEvent然后event.preventDefault()吗？ ej2.syncfusion.com/angular/documentation/api/calendar/…

preventDefault() 函数到底是干什么用的？这使您可以选择日期。

您可以在 MDN 上阅读有关它的更多信息。我会尝试将其作为解决方案。 developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault

如果你想禁用点击灰色日期（已经有一个特定的 css 类），你也可以通过 css 来完成。 pointer-events: none;

【参考方案1】：

您可以使用类似这样的 css 来禁用点击事件

/deep/.calendar 
   pointer-events: none;

您需要为要禁用点击事件的元素添加正确的类或 id

【参考方案2】：

您可以使用 renderDayCell 方法禁用同步融合日期选择器组件中所需的日期。请检查以下代码块。

https://stackblitz.com/edit/angular-syz8gx?file=app.component.html

在这里，我们在 DatePicker 弹出窗口中禁用了周结束。因此，我们无法选择或单击日期。