如何使用角度链接功能禁用除特定元素之外的所有点击答案

【问题标题】：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);
    };
  }

【问题讨论】：

标签： javascript jquery angularjs angularjs-directive

【解决方案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;
}

只需在顶层层次结构中实用地添加/删除类。

【讨论】：