Расширения Chrome - почему событие click во всплывающем обновлении popup html?

Я экспериментировал с расширениями Chrome, и я обнаружил странное поведение всплывающего окна.Расширения Chrome - почему событие click во всплывающем обновлении popup html?

В popup.html есть один элемент <a id="grantexpert">...</a> и в popup.js Я бы хотел изменить цвет фона этого элемента при нажатии. Изменение цвета работает при изменении сразу после готовности документа. Но когда в событии клика цвет изменяется в течение очень короткого времени (просто мигание) при нажатии, а затем сразу возвращается к исходным настройкам. Похоже, всплывающее окно перезагружается снова после события click.

манифеста:

"browser_action": { 
    "default_popup": "popup/popup.html" 
    },

popup.html:

<!DOCTYPE html> 
    <head> 
    <script src='../other/jquery-3.1.1.min.js'></script> 
    <script src='popup.js'></script> 
    </head> 

    <body style="width:250px;"> 

    <a class="testitem" href id="grantexpert">grantexpert.sk</a> 

    </body> 
</html>

popup.js:

(function($) { 

    $(document).ready(function() { 

    //$("#grantexpert").css('font-size', '28px'); - this works 

    // this does not work 
    $('#grantexpert').click(function() { 
     $(this).css('font-size', '28px'); 
    }); 

    }); 

})(jQuery);

Почему элемент изменить цвет для мигания, но не сохраняет скорректированные свойства после события click и возвратит их обратно?

источник

2016-12-20 Incredible

Попытка удаления пустой href на a:

<a class="testitem" href id="grantexpert">grantexpert.sk</a>

к:

<a class="testitem" id="grantexpert">grantexpert.sk</a>

источник

2016-12-20 16:26:44 Syden

Теперь это работает, но я не понимаю, почему. – Incredible

Беспокойство 'href' обновляло всплывающее окно. – Syden

это перезагружает страницу при щелчке по ссылке.

<a href ...

попробовать добавить NOP по ссылке

<a href="javascript:;" ...

или удалить его, как и другие предполагают

<a ...

Это аналогичный вопрос Is an empty href valid? и Which "href" value should I use for JavaScript links, "#" or "javascript:void(0)"?

источник

2016-12-20 16:27:38 corn3lius

Вынуть HREF из тега. Href изменит URL-адрес всплывающего окна, чтобы всплывающее окно обновилось. Удалив его, вы не будете изменять URL-адрес при нажатии.

источник

2016-12-20 16:30:50 xagos

Я испытал нечто подобное. Когда у меня есть простая кнопка во всплывающем окне:

<button id="myButton">My Button</button>

Нажатие на нее заставляет всплывающее окно перезагружается. Чтобы избежать такого поведения, вам необходимо предотвратить событие по умолчанию. Например, с jQuery:

$("#myButton").click(function(event){ 
    event.preventDefault(); // needed to prevent the popup from being reloaded 
    // do something here 
    showMessage("My Button has been clicked"); 
});

источник

2018-03-07 04:44:35

Расширения Chrome - почему событие click во всплывающем обновлении popup html?

ответ

Смежные вопросы