如何使用角度链接功能禁用除特定元素之外的所有点击
Posted
技术标签:
【中文标题】如何使用角度链接功能禁用除特定元素之外的所有点击【英文标题】:How disable all the clicks excepts particular elements using angular link function 【发布时间】:2018-01-02 19:29:08 【问题描述】:这是角度指令链接函数
function link(WarningService: Warning.Service): ng.IDirectiveLinkFn
return ($scope: ng.IScope, element: JQuery): void =>
element[0].addEventListener('click', () =>
, true);
;
我需要启用仅单击按钮、锚点、输入、选择、.nav 和其他我不想要 clcikc 事件的项目。
并且还避免了禁用元素的点击事件。我在下面使用了 jquery
$('body').on('click',function(e)
if(e.target.tagName !== " 'a' || 'button' || 'input' || 'select' "
|| e.target.className == '.nav')
e.stopPropagation();
e.preventDefault();
)
;
现在我需要帮助如何将我的 jquery 代码包含到我的角度指令中
function link(WarningService: Warning.Service): ng.IDirectiveLinkFn
return ($scope: ng.IScope, element: JQuery): void =>
element[0].addEventListener('click', (e) =>
if(element[0].tagName !== " 'a' || 'button' || 'input' || 'select' " || element[0].className == '.nav')
e.stopPropagation();
e.preventDefault();
else
, true);
;
【问题讨论】:
【参考方案1】:您可以尝试为要禁用点击事件绑定的所有 DOM 元素分配一个特定的类名。因此只需检查元素的类名。
【讨论】:
我也在考虑同样的问题,但反之亦然,将一些类添加到要处理的元素中单击,然后选择它们并附加事件处理程序【参考方案2】:首先用函数替换点击事件处理程序的箭头函数。
element[0].addEventListener('click', function()
// here this will refer to your element[0]
// and then check if this has the class you're looking for or
// tag name you're looking for
, true);
【讨论】:
我需要如何在我的链接函数中传递事件? 和你一样element[0].addEventListener('click', function(e)
并且您不需要将事件传递给您的链接函数。当您使用 addEventListener
将 click 事件处理程序绑定到 element[0]
时,它将被隐式传递【参考方案3】:
您可以在*** DOM(正文)中添加一个类,例如 disableOthers
并维护类似的 CSS
.disableOthers *:not(button):not(a):not(button):not(select):not(nav)
pointer-events: none;
只需在顶层层次结构中实用地添加/删除类。
【讨论】:
以上是关于如何使用角度链接功能禁用除特定元素之外的所有点击的主要内容,如果未能解决你的问题,请参考以下文章
如何使用 SQLAlchemy 核心选择除 postgresql 中的 1 个特定列之外的所有表列?