Почему при вставке <span>с помощью слушателя при наведении мыши эта кнопка теряет (частичный) щелчок? - PullRequest
0 голосов
/ 16 января 2019

У меня есть кнопки, которые берут текст кнопки из атрибутов, и они работают нормально. Слушатель щелчков работает как задумано.

Однако, когда я добавляю слушателя для mousover и innerhtml новый текст кнопки, они перестают работать частично. (При нажатии работают только внешние края кнопок)

Я думаю, что я сузил его до элемента <span>, который я также добавляю, но я не уверен, как не дать ему сломать кнопку.

Кнопка отлично работает со следующим кодом:

if (buttonText){
buttonText = payButtons.getAttribute("button-text");
} else {
buttonText = "Support This Site";
}
payButtons.innerHTML = "<span>"+buttonText+"</span>";

Кнопка активируется только по ее внешним краям со следующим кодом:

if (buttonText){
buttonText = payButtons.getAttribute("button-text");
payButtons.addEventListener("mouseover", mouseover);
} else {
buttonText = "Support This Site";
}

payButtons.innerHTML = "<span>"+buttonText+"</span>";



function mouseover()
{
buttonText = this.getAttribute('amount') + " " + this.getAttribute('amount-type');
this.innerHTML = "<span>"+buttonText+"</span>";
}

Можно ли что-нибудь сделать, кроме полного удаления этой функциональности?

Демонстрация кнопок в режиме реального времени (первая кнопка, вверху слева): https://jsfiddle.net/0ctpbuzx/6/

...