【问题标题】：How to enable click functionality of div in javascript or jquery?如何在 javascript 或 jquery 中启用 div 的点击功能？
【发布时间】：2015-06-03 20:46:05
【问题描述】：

我使用以下代码禁用了 div

$("#menuDiv1").children().bind('click', function(){ 
     return false; 
});

menuDiv 包含

<ul>
    <li><a class="home" href="#/Dashboard">Dashboard</a></li>
    <li><a class="forms" href="#/ViewLeads">Lead</a></li>
    <li><a class="forms"  href="#/ViewCases/0">Cases</a></li> 


</ul>

但现在我想再次启用它。我该怎么做？

在 Angular js 中还有其他解决方案吗？

【问题讨论】：

你使用的是Angular，然后尝试使用anuglar实现结果

标签： javascript jquery html angularjs

【解决方案1】：

你可以使用unbind来移除禁用点击事件

 $("#menuDiv1").children().unbind('click');

要重新启用点击事件，请使用以下代码。

  function clickfunc(){
     // your code
  }

  $("#menuDiv1").children().bind('click',clickfunc);

第二个选项

你可以使用off来移除禁用点击事件

$("#menuDiv1").children().off('click');

要重新启用点击事件，请使用以下代码。

  function clickfunc(){
     // your code
  }

  $("#menuDiv1").children().on('click',clickfunc);

EDIT 如下所述，代码是避免a,button 标签上的点击事件。

DEMO

function clickfunc(event){
     if(event.target.nodeName === 'A' || event.target.nodeName == "BUTTON"){
      return false;
     }

      // your code
     alert("click")
}

$("#menuDiv1").children().on('click',clickfunc);

【讨论】：

没有。在 click 上执行不同任务的按钮和 href 标签。但是，如果我将 bind 与 clickfunc 一起使用，那么它将对所有 .如何恢复按钮和标签的默认操作。
@SunilGarg 您使用 not() 函数，例如.children().not('button')
@SunilGarg 这里是你想要它避免按钮和 href 点击并返回 false jsfiddle.net/cjbwh39q/1 的完美示例
您提供的代码运行良好。但我需要恢复我以前的 div 按钮功能。请再次检查问题我提供了我的 div 数据
@SunilGarg 无法理解 .. 意味着我为您提供了许多选项来避免特定元素上的点击事件。我也看不到你的 HTML 中的按钮。你能详细解释一下吗？当您禁用点击事件以及何时启用点击事件？

【解决方案2】：

您可以使用 unbind 禁用并再次使用 bind 启用。

$("#menuDiv1").children().unbind('click');

再次绑定

$("#menuDiv1").children().bind('click', clickhander);

你最好使用 jQuery.on 和 jQuery.off 来代替 bind 和 unbind。

【讨论】：

【解决方案3】：

在 Angular 中，您可以组合使用 ng-click 和 ng-disabled。例如：

<button ng-click="clicked()" ng-disabled="val">Click</button>

然后在控制器中将val 设置为true 或false 设置为enable/disable 点击按钮。

$scope.val = true; //To disable button

编辑：

对于 div 你可以这样做：

 <div ng-click="val || clicked()" ng-disabled="val">Click</div>

【讨论】：

ng-disabled 可以正常使用按钮。但是当我将它与 div 一起使用时，什么也没有发生。我的意思是按钮或仍然有效。我们可以在 div 上应用它吗？
。我直接对 ng-disabled 使用了 true。不工作。
@SunilGarg 然后在 ng-click 中将 val 替换为 true。但我建议您使用 ng-disabled 变量而不是 tru 变量，以便您以后可以修改它。
我将 div 更改为
并在控制器中设置 val为真。但仍然无法正常工作。

【解决方案4】：

使用on/off可以启用或禁用点击事件

禁用点击

$("#menuDiv1").children().off('click');

启用点击

$("#menuDiv1").children().on('click', function(){ 

// do here work

});

【讨论】：

【解决方案5】：

您可以取消绑定之前绑定的点击事件处理程序，或者有条件地阻止事件：

$("#menuDiv1").children().bind('click', function (e) {
    if ($(this).hasClass('no-click')) {
        e.stopPropagation();
    }
});

顺便说一句，最好显式使用e.stopPropagation(); 来防止子到父事件冒泡，而不是隐式使用return false。

【讨论】：

【解决方案6】：

根据您问题中的新信息，在 AngularJS 中执行此操作的正确方法是使用 $locationChangeStart 事件。

Plunker

app.run(function ($rootScope, $location) {
  $rootScope.$on('$locationChangeStart', function (event, next, current) {
    if ($rootScope.menuDeactivated) {
      event.preventDefault();
    }
  });
});

这是一个在 $rootScope 上设置变量的非常简单的示例，但您可以改为运行一个函数（例如，如果您想保存表单值或在更改路由之前提示用户，这很有帮助）或注入服务（例如，如果您要检查用户是否已登录）等。

【讨论】：