如何禁用所有ng-click和ng-submit事件

Question

is there any way, how can I globally (in service) disable and enable all ng-click and ng-submit events?

For example when user is offline I want to disable all actions till he gets connection back..

I tried to bind all elements with an onClick event which will call stopImmediatePropagation but it didn't work..

    $('*[ng-click]').click(function( event ) {
      event.stopImmediatePropagation();
    });

Also this question is a little bit different from this one: Disable ng-click on certain conditions of application for all types of element

I'd like to disable/enable all events in APP globally from service, I'm not able to modify all ng-* calls on all elements in the APP..

Answer 1

Try including a return false too:

$('*[ng-click]').click(function( event ) {
  event.stopImmediatePropagation();
  return false;
});

Snippet

The below snippet demonstrates that multiple event handlers attached to a single <a> works too.

 $(function () { $("a").click(function () { alert("Hello!"); return false; }); $("a").click(function () { alert("Bye!"); return false; }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <a href="#">Click Me</a> 

Answer 2

So finally I end up with temporarily disabling all events on the page using jquery.. I got inspired from this plugin http://ignitersworld.com/lab/eventPause.html which for some reason did not work (without any error)

So I took main parts and put it to this class which is working now using jquery v2.1.1 :

var EventManager = function() {
    var self = this;
    var nullFun=function(){};

    var getIndex = function(array,value){
        for(var i=0; i< array.length; i++){
            if(array[i]==value){
                return i;
            }
        }
        return -1;  
    };

    this.pauseEvent = function(elm,eventAry){
        var events = $._data(elm, "events");

        if (events) {
            $.each(events, function(type, definition) {
                if((getIndex(eventAry,type)!=-1)||(eventAry=='')){
                    $.each(definition, function(index, event) {
                        if (event.handler.toString() != nullFun.toString()){
                            if(!$._iwEventPause) $._iwEventPause = {};

                            $._iwEventPause["iw-event" + event.guid] = event.handler;
                            event.handler = nullFun;
                        }
                    })
                }
            })
        }
    };

    this.activeEvent = function(elm,eventAry){
        var events = $._data(elm, "events");
        if (events) {
            $.each(events, function(type, definition) {
                if((getIndex(eventAry,type)!=-1)||(eventAry=='')){
                    $.each(definition, function(index, event) {
                        if (event.handler.toString() == nullFun.toString()){
                            event.handler = $._iwEventPause["iw-event" + event.guid];
                        }
                    })
                }
            })
        }
    };

    this.disableAll = function(el) {
        el = el || $('*');
        el.each(function() {
            self.pauseEvent($(this)[0], '');
        });
        self.pauseEvent($(window)[0], '');
    };

    this.enableAll = function(el) {
        el = el || $('*');
        el.each(function() {
            self.activeEvent($(this)[0], '');
        });
        self.activeEvent($(window)[0], '');
    };

    return this;    
};

var eManager = new EventManager();

eManager.disableAll();
eManager.enableAll();

This will go through window object and all elements on the page, move their event handlers away to _iwEventPause object and replace handlers with dummy function.. When enabling, it will move handlers back so they get normally called..

This solution does not handle event handlers added after disabling..