Вопросы Теги

Как обойти event.stopPropagation для запуска события

Для вашего массива длина массива равна 3 (например, name.length = 3). Но поскольку он хранит элемент, начинающийся с индекса 0, он имеет максимальный индекс 2.

Итак, вместо 'i ** & lt; = name.length' вы должны написать 'i & lt; ** name.length' чтобы избежать «ArrayIndexOutOfBoundsException».

1
задан Youstart 25 June 2019 в 19:14
поделиться

1 ответ

Не уверен, что в вашем случае, но вы можете попытаться справиться с «мертвой зоной», создающей новый связыватель событий после создания элемента, например: 

document.getElementById("add").addEventListener("click", function(e) {
    alert("eeeeee");
}, true);


// find element
var banner = $("#banner-message");

function changeColor() {
  setTimeout(function() {
    banner.removeClass("alt");
    alert('Your function');
  }, 1000)
}

// simulating async creation of element
var button = $("<button>", {
  text: "Change color",
  id: "add"
}).on("click", function(event) {
  event.stopPropagation();
  banner.addClass("alt");
  alert('button click');
}).appendTo(banner);



document.getElementById("add").addEventListener("click", function(e) {
  changeColor()
}, true);
body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id="banner-message">
  <p>Hello World</p>
</div>

Другой подход (Мы можем назвать это как «быстрое исправление», «обходной путь», «gambiarra», «Macgyver»]) . Но может сработать для вас, это связать ваше событие с родительским наложенным элементом с помощью CSS, а затем запустить исходное событие. Что-то вроде: 

// find element
    var banner = $("#banner-message");
    
    $(document).on('click', "#overlay-example", function(e) {
    	changeColor();
      $(this).find('button#add').click();
    });

    function changeColor() {
      banner.removeClass("alt");
      alert('Your function');
    }

    // simulating async creation of element
    var button = $("<button>", {
      text: "Change color",
      id: "add"
    }).on("click", function(event) {
      event.stopPropagation();
      banner.addClass("alt");
      alert('button click');
    }).appendTo(banner.find('#overlay-example'));
body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

/* */
#banner-message #overlay-example {
  z-index: 10;
}

#banner-message #overlay-example #add {
  z-index: 0;
  pointer-events: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<div id="banner-message">
  <p>Hello World</p>
  <div id="overlay-example">
  
  </div>
</div>

0
ответ дан Giovan Cruz 25 June 2019 в 19:14
поделиться
Другие вопросы по тегам:

Похожие вопросы: