How to stop propagation in all controls in a modal

Question

Since I found annoying the caching of a modal in angularjs and bootstrap, I found this article "$modal caching" to add a kind of version into the url of the modal and in that way avoid the caching of new changes in the content of the modal, but since I did that when I click on the button to open the modal or any control inside the modal I always get this script error Uncaught TypeError: Cannot read property 'toLowerCase' of undefined at ih.js:223 from jquery-3.1.0 library on line 223.

Button to open the edit department (mine)

    $scope.editDepartment = function(id){
        var uibModalInstance = $uibModal.open({
            templateUrl : '../webproject/modal_department.html?bust=' + Math.random().toString(36).slice(2),
            controller : 'DepartmentModalController',
            scope: $scope
        });
        return uibModalInstance.result.then(function(department){ 
            $scope.department = department;
        });
    }

jQuery method from jQuery library where it is produced the error

Messaging.prototype.addEventListener = function() {
  var func,
    _this = this;
  func = function(evt) {
    return _this.receiveMessage(evt);
  };
  if (this.window.addEventListener) {
    this.window.addEventListener("click", function(event) {

      var target = event.target;

      while (target && target.tagName.toLowerCase() !== 'a') {
        target = target.parentNode;
        if (!target) { return; }
      }

      var url = target.href;
      if(url.indexOf('afsrc=')>-1||url.indexOf('jdoqocy.com')>-1||url.indexOf('kqzyfj.com')>-1||url.indexOf('tkqlhce.com')>-1||url.indexOf('anrdoezrs.net')>-1||url.indexOf('dpbolvw.net')>-1) {
          chrome.extension.sendRequest({action:"suppressToolbar"});
      }

    });
    return this.window.addEventListener("message", func, false);
  } else if (this.window.attachEvent) {
    return this.window.attachEvent("onmessage", func);
  }
};

I debugged the code and from the moment that I click on the button to open the modal, on the save button that I have inside my modal, or any other control like a simple checkbox or radiobutton it goes to this code from Jquery while (target && target.tagName.toLowerCase() !== 'a') and I think (correct me if I am wrong) a bubbling is occurring. It starts to evaluate all HTML elements that contains the control until arrive to the element #document which does not have the property tagName and it generates the error.

I started to place on all controls the onclick="event.stopPropagation();" which works well but I started to pollute all the controls from modal.

Is there a way to stop the propagation in all inner controls from modal or in the code to open the modal or can I stop the bubbling from CSS?

EDIT

The error was due to some chrome extensions that I installed recently. I uninstalled them and restarted the browser and the problem was gone.

Answer 1

Expanding on your edit with a more concreat answer.

Yes, it was a Chrome extension causing that issue: InvisibleHand.

If you look inside that ih.js file you'll see the reference invisiblehand everywhere.