Chrome-Erweiterungen - warum klicken Ereignis im Popup Popup-HTML aktualisieren?

Im Experimentieren mit Chrome-Erweiterungen und ich fand ein seltsames Verhalten von Popup-Fenster.Chrome-Erweiterungen - warum klicken Ereignis im Popup Popup-HTML aktualisieren?

In popup.html ist ein Element <a id="grantexpert">...</a> und in popup.js möchte ich die Hintergrundfarbe dieses Elements ändern, wenn Sie darauf klicken. Die Änderung der Farbe funktioniert, wenn sie unmittelbar nach der Fertigstellung des Dokuments geändert wird. Aber wenn in Click-Ereignis, wird die Farbe für eine sehr kurze Zeit (nur ein Blinzeln) geändert, wenn geklickt und dann sofort zu den ursprünglichen Einstellungen zurückgegeben wird. Es sieht so aus, als ob das Popup-Fenster nach dem Klick-Ereignis erneut geladen wird.

Manifest:

"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);

Warum funktioniert das Element Ändern Sie die Farbe für einen Blinzler, behält aber die angepassten Eigenschaften nach dem Klickereignis nicht bei und setzt sie zurück?

Quelle

2016-12-20 Incredible

Versuchen leer href auf a entfernen:

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

an: den Link auf klicken

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

Quelle

2016-12-20 16:26:44 Syden

Jetzt funktioniert es, aber ich verstehe nicht warum. – Incredible

Beachte, dass 'href' das Popup aktualisiert hat. – Syden

diese die Seite neu geladen.

<a href ...

versuchen, eine NOP auf den Link Hinzufügen

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

oder es wie andere Entfernen vorschlagen

<a ...

Dies ist eine ähnliche Frage Is an empty href valid? und Which "href" value should I use for JavaScript links, "#" or "javascript:void(0)"?

Quelle

2016-12-20 16:27:38 corn3lius

das Entfernen href vom Tag. Der href ändert die URL des Popups, wodurch das Popup aktualisiert wird. Indem Sie es entfernen, werden Sie die URL beim Klicken nicht ändern.

Quelle

2016-12-20 16:30:50 xagos

Ich habe etwas ähnliches erlebt. Wenn ich eine einfache Schaltfläche auf dem Popup wie habe:

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

Klicken Sie auf es das Popup wird neu geladen. Um dieses Verhalten zu vermeiden, müssen Sie das Auftreten des Standardereignisses verhindern. Zum Beispiel mit jQuery:

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

Quelle

2018-03-07 04:44:35

Chrome-Erweiterungen - warum klicken Ereignis im Popup Popup-HTML aktualisieren?

Antwort

Verwandte Themen