如何在javascript或jquery中启用div的单击功能？

Question

我使用以下代码禁用了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>

但现在我想再次启用它。 我怎样才能做到这一点？

在角度js中是否还有其他解决方案？

Answer 1

您可以使用unbind来禁用和绑定以再次启用。

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

再次绑定它

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

你最好使用jQuery.on和jQuery.off而不是bind和unbind。

Answer 2

您可以使用unbind删除禁用单击事件

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

要在代码下方重新启用Click事件。

  function clickfunc(){
     // your code
  }

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

第二种选择

您可以使用off来删除禁用点击事件

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

要在代码下方重新启用Click事件。

  function clickfunc(){
     // your code
  }

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

编辑如下面讨论的代码是避免a,button标签上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); 

Answer 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>

Answer 4

使用开 / 关可以启用或禁用单击事件

禁用点击

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

启用单击

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

// do here work

});

Answer 5

您可以取消绑定以前绑定的单击事件处理程序，也可以有条件地阻止事件：

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

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

Answer 6

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

Plunker

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

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