角度停止事件传播

Question

This is an extension of my previous post here . I got everything working but I have 1 issue. When I start the intro the dropdown opens up exactly like I want, however when I click on the buttons inside the intro window (next, previous) then the dropdown closes. If I navigate the intro using my arrow keys it stays open. So how do I get the dropdown to stay open even if I'm using the intro window buttons to navigate the intro.

Here's the js portion for reference:

MainCtrl.prototype.startHelp = function() {
    var _this = this;
    _this.$timeout(function () {
        angular.element('#drop-down').click();
    }, 0, false);
    _this.CallMe();
};

Answer 1

well you can try adding following to those buttons click event handler functions:

function onClickedNext(event) {
... 
event.preventDefault();
event.stopPropagation();
}

Answer 2

This may be too late. But I achieved this by modifying intro.js code. Just stop the click event propagation inside "nextTooltipButton" defined in intro.js file.

Change the onclick listner function from this :

//next button
var nextTooltipButton = document.createElement('a');

  nextTooltipButton.onclick = function() {
    if (self._introItems.length - 1 != self._currentStep) {
      _nextStep.call(self);
    }
  };

to :

  //next button
  var nextTooltipButton = document.createElement('a');

  nextTooltipButton.onclick = function() {
    if (self._introItems.length - 1 != self._currentStep) {
      _nextStep.call(self);
      var e = window.event;
      e.stopPropagation();
    }
  };

Works for me on Chrome browser version 56.0.2924.87. As of today this code snippet is here .

We need no other changes in angular side.