So erkennen Sie das Ereignis "Browser Back Button" - Cross Browser

218

Wie erkennen Sie definitiv, ob der Benutzer die Zurück-Taste im Browser gedrückt hat oder nicht?

Wie erzwingen Sie die Verwendung einer In-Page-Zurück-Schaltfläche in einer einseitigen Webanwendung mithilfe eines #URLSystems?

Warum um alles in der Welt lösen Browser-Zurück-Schaltflächen keine eigenen Ereignisse aus?

Xarus
quelle
2
Ich möchte, dass Navigationsereignisse (rückwärts / vorwärts) irgendwann hinzugefügt werden. Bisher ist dies etwas in den Werken developer.mozilla.org/en-US/docs/Web/API/…
llaaalu

Antworten:

184

(Hinweis: Gemäß Sharkys Feedback habe ich Code zum Erkennen von Backspaces eingefügt.)

Daher habe ich diese Fragen in SO häufig gesehen und bin kürzlich auf das Problem gestoßen, die Funktionalität von Zurück-Schaltflächen selbst zu steuern. Nach einigen Tagen der Suche nach der besten Lösung für meine Anwendung (Single-Page mit Hash-Navigation) habe ich ein einfaches, browserübergreifendes, bibliotheksloses System zur Erkennung der Zurück-Schaltfläche entwickelt.

Die meisten Leute empfehlen:

window.onhashchange = function() {
 //blah blah blah
}

Diese Funktion wird jedoch auch aufgerufen, wenn ein Benutzer ein In-Page-Element verwendet, das den Standort-Hash ändert. Nicht die beste Benutzererfahrung, wenn Ihr Benutzer klickt und die Seite vorwärts oder rückwärts geht.

Um Ihnen einen allgemeinen Überblick über mein System zu geben, fülle ich ein Array mit vorherigen Hashes, während sich mein Benutzer durch die Benutzeroberfläche bewegt. Es sieht ungefähr so ​​aus:

function updateHistory(curr) {
    window.location.lasthash.push(window.location.hash);
    window.location.hash = curr;
}

Ziemlich einfach. Ich mache dies, um die browserübergreifende Unterstützung sowie die Unterstützung älterer Browser sicherzustellen. Übergeben Sie einfach den neuen Hash an die Funktion, und er speichert ihn für Sie und ändert dann den Hash (der dann in den Verlauf des Browsers aufgenommen wird).

Ich verwende auch eine Schaltfläche zum Zurückseiten innerhalb der Seite, mit der der Benutzer mithilfe des lasthashArrays zwischen den Seiten verschoben wird. Es sieht aus wie das:

function goBack() {
    window.location.hash = window.location.lasthash[window.location.lasthash.length-1];
    //blah blah blah
    window.location.lasthash.pop();
}

Dadurch wird der Benutzer zurück zum letzten Hash verschoben und dieser letzte Hash aus dem Array entfernt (ich habe derzeit keine Schaltfläche zum Weiterleiten).

So. Wie erkenne ich, ob ein Benutzer meine In-Page-Zurück-Schaltfläche oder die Browser-Schaltfläche verwendet hat?

Zuerst habe ich mir das angeschaut window.onbeforeunload, aber ohne Erfolg - das wird nur aufgerufen, wenn der Benutzer die Seiten wechseln will. Dies ist in einer Einzelseitenanwendung mit Hash-Navigation nicht der Fall.

Nach einigem Graben sah ich Empfehlungen für den Versuch, eine Flag-Variable zu setzen. Das Problem dabei ist in meinem Fall, dass ich versuchen würde, es festzulegen, aber da alles asynchron ist, würde es nicht immer rechtzeitig für die if-Anweisung in der Hash-Änderung festgelegt. .onMouseDownwurde nicht immer mit einem Klick aufgerufen, und das Hinzufügen zu einem Onclick würde es niemals schnell genug auslösen.

Zu diesem Zeitpunkt begann ich, den Unterschied zwischen documentund zu untersuchen window. Meine endgültige Lösung bestand darin, das Flag mit zu setzen document.onmouseoverund es mit zu deaktivieren document.onmouseleave.

Während sich die Maus des Benutzers im Dokumentbereich befindet (lesen: die gerenderte Seite, jedoch ohne den Browser-Frame), wird mein Boolescher Wert auf gesetzt true. Sobald die Maus den Dokumentbereich verlässt, wechselt der Boolesche Wert zu false.

Auf diese Weise kann ich meine ändern window.onhashchangezu:

window.onhashchange = function() {
    if (window.innerDocClick) {
        window.innerDocClick = false;
    } else {
        if (window.location.hash != '#undefined') {
            goBack();
        } else {
            history.pushState("", document.title, window.location.pathname);
            location.reload();
        }
    }
}

Sie werden den Scheck für notieren #undefined. Dies liegt daran, dass wenn in meinem Array kein Verlauf verfügbar ist, dieser zurückgegeben wird undefined. Ich benutze dies, um den Benutzer zu fragen, ob er mit einem window.onbeforeunloadEreignis gehen möchte .

Kurz gesagt und für Personen, die nicht unbedingt eine In-Page-Zurück-Schaltfläche oder ein Array zum Speichern des Verlaufs verwenden:

document.onmouseover = function() {
    //User's mouse is inside the page.
    window.innerDocClick = true;
}

document.onmouseleave = function() {
    //User's mouse has left the page.
    window.innerDocClick = false;
}

window.onhashchange = function() {
    if (window.innerDocClick) {
        //Your own in-page mechanism triggered the hash change
    } else {
        //Browser back button was clicked
    }
}

Und da hast du es. Eine einfache dreiteilige Methode zur Erkennung der Verwendung von Zurück-Schaltflächen im Vergleich zu In-Page-Elementen in Bezug auf die Hash-Navigation.

BEARBEITEN:

Um sicherzustellen, dass der Benutzer keine Rücktaste verwendet, um das Rückereignis auszulösen, können Sie auch Folgendes einschließen (Dank an @thetoolman für diese Frage ):

$(function(){
    /*
     * this swallows backspace keys on any non-input element.
     * stops backspace -> back
     */
    var rx = /INPUT|SELECT|TEXTAREA/i;

    $(document).bind("keydown keypress", function(e){
        if( e.which == 8 ){ // 8 == backspace
            if(!rx.test(e.target.tagName) || e.target.disabled || e.target.readOnly ){
                e.preventDefault();
            }
        }
    });
});
Xarus
quelle
5
+1 nette Idee, aber ich denke, dies wird fehlschlagen, wenn der Benutzer eine beliebige Tastenkombination für "Zurück" (Rücktaste auf Firefox) verwendet, während sich seine Maus im Browserfenster befindet
Sharky
3
Will do - ich bin sowieso gerade im Büro :) (EDIT: Fertig jetzt)
Xarus
7
Was ist mit Handy (zB iPad)
Basarat
5
Was ist mit Swipe-Ereignissen vom Trackpad in MAC? Könnte das auch erfasst werden?
Sriganesh Navaneethakrishnan
6
Wie kann ich Vorwärts- und Rückwärtsschaltflächen unterscheiden?
Mr_Perfect
79

Sie können den popstateEvent-Handler ausprobieren , z.

window.addEventListener('popstate', function(event) {
    // The popstate event is fired each time when the current history entry changes.

    var r = confirm("You pressed a Back button! Are you sure?!");

    if (r == true) {
        // Call Back button programmatically as per user confirmation.
        history.back();
        // Uncomment below line to redirect to the previous page instead.
        // window.location = document.referrer // Note: IE11 is not supporting this.
    } else {
        // Stay on the current page.
        history.pushState(null, null, window.location.pathname);
    }

    history.pushState(null, null, window.location.pathname);

}, false);

Hinweis: Um die besten Ergebnisse zu erzielen, sollten Sie diesen Code nur auf bestimmten Seiten laden, auf denen Sie die Logik implementieren möchten, um andere unerwartete Probleme zu vermeiden.

Das Popstate-Ereignis wird jedes Mal ausgelöst, wenn sich der aktuelle Verlaufseintrag ändert (Benutzer navigiert zu einem neuen Status). Das passiert , wenn der Benutzer klickt auf dem Browser Back / Forward - Tasten oder wenn history.back(), history.forward(), history.go()werden Methoden programmatisch genannt.

Die event.stateis-Eigenschaft des Ereignisses entspricht dem Verlaufsstatusobjekt.

Umschließen Sie die jQuery-Syntax (um einen Listener hinzuzufügen, nachdem das Dokument fertig ist):

(function($) {
  // Above code here.
})(jQuery);

Siehe auch: window.onpopstate beim Laden der Seite


Siehe auch die Beispiele für Single-Page-Apps und die HTML5-PushState- Seite:

<script>
// jQuery
$(window).on('popstate', function (e) {
    var state = e.originalEvent.state;
    if (state !== null) {
        //load content with ajax
    }
});

// Vanilla javascript
window.addEventListener('popstate', function (e) {
    var state = e.state;
    if (state !== null) {
        //load content with ajax
    }
});
</script>

Dies sollte mit Chrome 5+, Firefox 4+, IE 10+, Safari 6+, Opera 11.5+ und ähnlichem kompatibel sein.

Kenorb
quelle
2
Kenorb, Sie haben Recht, dass Popstate die Änderung übernimmt, aber es unterscheidet nicht zwischen dem programmgesteuerten Aufrufen des Ereignisses und dem Klicken des Benutzers auf die Schaltflächen des Browsers.
Xarus
1
Toller Beitrag zu Single-Page Apps und HTML5 pushState . Perfekt für moderne "One-Page-Layouts" oder "Single-Page-Apps". Vielen Dank für den Link und Ihre Antwort!
Lowtechsun
1
e.state scheinen in modernen Browsern immer undefiniert zu sein
FAjir
Ich schlage vor, dass Sie Ihren Code in ein Snippet einfügen, damit Sie ihn direkt hier ausführen können.
FourCinnamon0
16

Ich hatte eine ganze Weile mit dieser Anforderung zu kämpfen und einige der oben genannten Lösungen gewählt, um sie umzusetzen. Ich bin jedoch auf eine Beobachtung gestoßen, die anscheinend in allen Browsern von Chrome, Firefox und Safari + Android und iPhone funktioniert

Laden auf der Seite:

window.history.pushState({page: 1}, "", "");

window.onpopstate = function(event) {

  // "event" object seems to contain value only when the back button is clicked
  // and if the pop state event fires due to clicks on a button
  // or a link it comes up as "undefined" 

  if(event){
    // Code to handle back button or prevent from navigation
  }
  else{
    // Continue user action through link or button
  }
}

Lassen Sie mich wissen, ob das hilft. Wenn etwas fehlt, werde ich gerne verstehen.

Itzmeygu
quelle
1
Nicht wahr. eventhat sogar Wert für den Vorwärtsknopf
Daniel Birowsky Popeski
14

In Javascript 2bedeutet Navigationstyp, dass auf die Schaltfläche "Zurück" oder "Vorwärts" des Browsers geklickt wird und der Browser tatsächlich Inhalte aus dem Cache entnimmt.

if(performance.navigation.type == 2)
{
    //Do your code here
}
Hasan Badshah
quelle
1
Dies funktioniert nicht bei einer Anwendung mit nur einer Seite. Das Ergebnis ist immer 1 (was bedeutet, dass es neu geladen wird). Außerdem macht es keinen Unterschied zwischen Zurück- und Vorwärts-Taste, was sehr unglücklich ist.
Papillon
"Außerdem macht es keinen Unterschied zwischen der Schaltfläche" Zurück "und" Vorwärts ", was sehr unglücklich ist." Ja, denn wenn Daten zu diesem Zeitpunkt aus dem Cache abgerufen werden, ist der Typ "performance.navigation.type" 2
Hasan Badshah,
Das funktioniert nicht garantiert in allen Browsern! Sie sollten also Folgendes schreiben: if (window.performance) {// Ihr leistungsbezogener Code} ist für eine bessere Lesbarkeit auch besser, TYPE_BACK_FORWARD anstelle von 2 zu verwenden.
blank94
7

Dies wird definitiv funktionieren (zum Erkennen des Zurück-Button-Klicks)

$(window).on('popstate', function(event) {
 alert("pop");
});
Rohan Parab
quelle
6

Sieh dir das an:

history.pushState(null, null, location.href);
    window.onpopstate = function () {
        history.go(1);
    };

es funktioniert gut...

Jorge Rocha
quelle
Funktioniert nicht in Chrome 78.0.3904.70 (Official Build) (64-Bit)
Jeffz
Bestätigte Arbeit an Brave v1.3.118 >> Chrom: 80.0.3987.116 (Official Build) (64-Bit)
ZeroThe2nd
Funktioniert nicht, wenn Sie von einer externen Site auf die Seite gekommen sind.
Milan Vlach
5
if (window.performance && window.performance.navigation.type == window.performance.navigation.TYPE_BACK_FORWARD) {
  alert('hello world');
}

Dies ist die einzige Lösung, die für mich funktioniert hat (es ist keine einseitige Website). Es funktioniert mit Chrome, Firefox und Safari.

escanxr
quelle
1
window.performance.navigation ist veraltet. Hier sind die docs developer.mozilla.org/en-US/docs/Web/API/Performance/navigation
llaaalu
Dies funktionierte für mich auf meiner .cshtml-Seite. Arbeitete erfolgreich auf Chrome und IE. Danke
Justjyde
5

Die richtige Antwort ist bereits vorhanden, um die Frage zu beantworten. Ich möchte die neue JavaScript-API PerformanceNavigationTiming erwähnen , die veraltete performance.navigation ersetzt .

Der folgende Code meldet sich in der Konsole "back_forward" an, wenn der Benutzer mit der Schaltfläche "Zurück" oder "Vorwärts" auf Ihrer Seite gelandet ist. Sehen Sie sich die Kompatibilitätstabelle an, bevor Sie sie in Ihrem Projekt verwenden.

var perfEntries = performance.getEntriesByType("navigation");
for (var i = 0; i < perfEntries.length; i++) {
    console.log(perfEntries[i].type);
}
llaaalu
quelle
Auf diese Weise können Sie nicht feststellen, ob auf dieser Seite auf die Schaltfläche "Zurück" geklickt wurde . Es zeigt an, ob auf der letzten Seite darauf geklickt wurde .
Seph Reed
Aber es war zufällig die eigentliche Antwort, nach der ich gesucht habe, da das Problem auftritt, nachdem ich auf die Schaltfläche "Zurück" geklickt habe, und nicht bevor ich bedeutet, dass ich einen Antwortcode einbauen kann, der meine Probleme mit doppelten Anforderungen stoppt. Vielen Dank.
Andrew
1
Dies kann die Frage nicht beantworten, aber genau das, was ich brauchte! Schön - ich wusste nichts davon ...
Hogsmill
4

Browser: https://jsfiddle.net/Limitlessisa/axt1Lqoz/

Für die mobile Steuerung: https://jsfiddle.net/Limitlessisa/axt1Lqoz/show/

$(document).ready(function() {
  $('body').on('click touch', '#share', function(e) {
    $('.share').fadeIn();
  });
});

// geri butonunu yakalama
window.onhashchange = function(e) {
  var oldURL = e.oldURL.split('#')[1];
  var newURL = e.newURL.split('#')[1];

  if (oldURL == 'share') {
    $('.share').fadeOut();
    e.preventDefault();
    return false;
  }
  //console.log('old:'+oldURL+' new:'+newURL);
}
.share{position:fixed; display:none; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.8); color:white; padding:20px;
<!DOCTYPE html>
<html>

<head>
    <title>Back Button Example</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

</head>

<body style="text-align:center; padding:0;">
    <a href="#share" id="share">Share</a>
    <div class="share" style="">
        <h1>Test Page</h1>
        <p> Back button press please for control.</p>
    </div>
</body>

</html>

Grenzenlose isa
quelle
Dies beantwortet die gestellte Frage nicht. Bei der Frage geht es darum, die Verwendung einer In-Page-Zurück-Schaltfläche gegenüber der nativen Zurück-Schaltfläche des Browsers zu erkennen.
Xarus
2
Die Frage ist mit Javascript gekennzeichnet, nicht mit jquery.
Skwny
3

Hier ist meine Meinung dazu. Die Annahme ist, wenn sich die URL ändert, aber kein Klick innerhalb des documentErkannten vorhanden ist, handelt es sich um einen Browser zurück (ja oder vorwärts). Ein Benutzerklick wird nach 2 Sekunden zurückgesetzt, damit dies auf Seiten funktioniert, die Inhalte über Ajax laden:

(function(window, $) {
  var anyClick, consoleLog, debug, delay;
  delay = function(sec, func) {
    return setTimeout(func, sec * 1000);
  };
  debug = true;
  anyClick = false;
  consoleLog = function(type, message) {
    if (debug) {
      return console[type](message);
    }
  };
  $(window.document).click(function() {
    anyClick = true;
    consoleLog("info", "clicked");
    return delay(2, function() {
      consoleLog("info", "reset click state");
      return anyClick = false;
    });
  });
  return window.addEventListener("popstate", function(e) {
    if (anyClick !== true) {
      consoleLog("info", "Back clicked");
      return window.dataLayer.push({
        event: 'analyticsEvent',
        eventCategory: 'test',
        eventAction: 'test'
      });
    }
  });
})(window, jQuery);
TomTom101
quelle
2

Ich konnte einige der Antworten in diesem Thread und andere verwenden, um es in IE und Chrome / Edge zum Laufen zu bringen. history.pushState wurde für mich in IE11 nicht unterstützt.

if (history.pushState) {
    //Chrome and modern browsers
    history.pushState(null, document.title, location.href);
    window.addEventListener('popstate', function (event) {
        history.pushState(null, document.title, location.href);
    });
}
else {
    //IE
    history.forward();
}
Arsalan Siddiqui
quelle
Ich habe das gerade auf Chrome 78.0.3904.70 (Official Build) (64-Bit) versucht und es hat nicht funktioniert.
Jeffz
2

Eine vollwertige Komponente kann nur implementiert werden, wenn Sie die API neu definieren (die Methoden des Objekts 'Verlauf' ändern). Ich werde die gerade geschriebene Klasse freigeben. Getestet auf Chrome und Mozilla Unterstützung nur HTML5 und ECMAScript5-6

class HistoryNavigation {
    static init()
    {
        if(HistoryNavigation.is_init===true){
            return;
        }
        HistoryNavigation.is_init=true;

        let history_stack=[];
        let n=0;
        let  current_state={timestamp:Date.now()+n};
        n++;
        let init_HNState;
        if(history.state!==null){
            current_state=history.state.HNState;
            history_stack=history.state.HNState.history_stack;
            init_HNState=history.state.HNState;
        } else {
            init_HNState={timestamp:current_state.timestamp,history_stack};
        }
        let listenerPushState=function(params){
            params=Object.assign({state:null},params);
            params.state=params.state!==null?Object.assign({},params.state):{};
            let h_state={ timestamp:Date.now()+n};
            n++;
            let key = history_stack.indexOf(current_state.timestamp);
            key=key+1;
            history_stack.splice(key);
            history_stack.push(h_state.timestamp);
            h_state.history_stack=history_stack;
            params.state.HNState=h_state;
            current_state=h_state;
            return params;
        };
        let listenerReplaceState=function(params){
            params=Object.assign({state:null},params);
            params.state=params.state!==null?Object.assign({},params.state):null;
            let h_state=Object.assign({},current_state);
            h_state.history_stack=history_stack;
            params.state.HNState=h_state;
            return params;
        };
        let desc=Object.getOwnPropertyDescriptors(History.prototype);
        delete desc.constructor;
        Object.defineProperties(History.prototype,{

            replaceState:Object.assign({},desc.replaceState,{
                value:function(state,title,url){
                    let params={state,title,url};
                    HistoryNavigation.dispatchEvent('history.state.replace',params);
                    params=Object.assign({state,title,url},params);
                    params=listenerReplaceState(params);
                    desc.replaceState.value.call(this,params.state,params.title,params.url);
                }
            }),
            pushState:Object.assign({},desc.pushState,{
                value:function(state,title,url){
                    let params={state,title,url};
                    HistoryNavigation.dispatchEvent('history.state.push',params);
                    params=Object.assign({state,title,url},params);
                    params=listenerPushState(params);
                    return desc.pushState.value.call(this, params.state, params.title, params.url);
                }
            })
        });
        HistoryNavigation.addEventListener('popstate',function(event){
            let HNState;
            if(event.state==null){
                HNState=init_HNState;
            } else {
                HNState=event.state.HNState;
            }
            let key_prev=history_stack.indexOf(current_state.timestamp);
            let key_state=history_stack.indexOf(HNState.timestamp);
            let delta=key_state-key_prev;
            let params={delta,event,state:Object.assign({},event.state)};
            delete params.state.HNState;
            HNState.history_stack=history_stack;
            if(event.state!==null){
                event.state.HNState=HNState;
            }
            current_state=HNState;
            HistoryNavigation.dispatchEvent('history.go',params);
        });

    }
    static addEventListener(...arg)
    {
        window.addEventListener(...arg);
    }
    static removeEventListener(...arg)
    {
        window.removeEventListener(...arg);
    }
    static dispatchEvent(event,params)
    {
        if(!(event instanceof Event)){
            event=new Event(event,{cancelable:true});
        }
        event.params=params;
        window.dispatchEvent(event);
    };
}
HistoryNavigation.init();

// exemple

HistoryNavigation.addEventListener('popstate',function(event){
    console.log('Will not start because they blocked the work');
});
HistoryNavigation.addEventListener('history.go',function(event){
    event.params.event.stopImmediatePropagation();// blocked popstate listeners
    console.log(event.params);
    // back or forward - see event.params.delta

});
HistoryNavigation.addEventListener('history.state.push',function(event){
    console.log(event);
});
HistoryNavigation.addEventListener('history.state.replace',function(event){
    console.log(event);
});
history.pushState({h:'hello'},'','');
history.pushState({h:'hello2'},'','');
history.pushState({h:'hello3'},'','');
history.back();

    ```
AlexeyP0708
quelle
Netter Ansatz! Vielen Dank für das Hinzufügen (ich finde es immer noch erstaunlich, dass es nach so vielen Jahren Gespräche in diesem Thread gibt)
Xarus
Dies scheint ein cleverer Mechanismus zur Verfolgung der Geschichte zu sein. Der Code ist jedoch nicht kommentiert, so dass es ziemlich schwierig ist, ihm zu folgen. Wenn jemand von der aktuellen Seite weg navigiert, erkennt der Code diesen Tastendruck nicht, wodurch die ursprüngliche Frage "Wie erkennt man definitiv, ob der Benutzer die Zurück-Taste im Browser gedrückt hat oder nicht?" Nicht beantwortet wird. Tastendruck und Verlaufsverfolgung sind zwei verschiedene Dinge, auch wenn einer den anderen auslösen kann. Die Tatsache, dass immer noch Gespräche geführt werden, weist auf einen großen Fehler im Webbrowser-Design hin.
CubicleSoft
1

Der document.mouseover funktioniert nicht für IE und FireFox. Ich habe es jedoch versucht:

$(document).ready(function () {
  setInterval(function () {
    var $sample = $("body");
    if ($sample.is(":hover")) {
      window.innerDocClick = true;
    } else {
      window.innerDocClick = false;
    }
  });

});

window.onhashchange = function () {
  if (window.innerDocClick) {
    //Your own in-page mechanism triggered the hash change
  } else {
    //Browser back or forward button was pressed
  }
};

Dies funktioniert für Chrome und IE und nicht für FireFox. Ich arbeite immer noch daran, FireFox richtig zu machen. Jede einfache Methode zum Erkennen des Zurück- / Vorwärtsklickens des Browsers ist willkommen, insbesondere in JQuery, aber auch in AngularJS oder einfachem Javascript.

Dhruv Gupta
quelle
1
 <input style="display:none" id="__pageLoaded" value=""/>


 $(document).ready(function () {
        if ($("#__pageLoaded").val() != 1) {

            $("#__pageLoaded").val(1);


        } else {
            shared.isBackLoad = true;
            $("#__pageLoaded").val(1);  

            // Call any function that handles your back event

        }
    });

Der obige Code hat bei mir funktioniert. Wenn der Benutzer in mobilen Browsern auf die Schaltfläche "Zurück" klickte, wollten wir den Seitenstatus gemäß seinem vorherigen Besuch wiederherstellen.

Ashwin
quelle
Der obige Code funktionierte für mich in mobilen Browsern. Als Benutzer auf die Schaltfläche "Zurück" klickten, wollten wir den Seitenstatus gemäß seinem vorherigen Besuch wiederherstellen
Ashwin,
0

Ich habe es gelöst, indem ich das ursprüngliche Ereignis verfolgt habe, das das ausgelöst hat hashchange(sei es ein Wischen, ein Klicken oder ein Rad), damit das Ereignis nicht mit einer einfachen Landung auf der Seite verwechselt wird, und ein zusätzliches Flag in verwendet habe jede meiner Ereignisbindungen. Der Browser setzt das Flag nicht erneut auf, falsewenn Sie auf die Schaltfläche "Zurück" klicken:

var evt = null,
canGoBackToThePast = true;

$('#next-slide').on('click touch', function(e) {
    evt = e;
    canGobackToThePast = false;
    // your logic (remember to set the 'canGoBackToThePast' flag back to 'true' at the end of it)
}

quelle
-21

Ich habe die oben genannten Optionen ausprobiert, aber keine davon funktioniert für mich. Hier ist die Lösung

if(window.event)
   {
        if(window.event.clientX < 40 && window.event.clientY < 0)
        {
            alert("Browser back button is clicked...");
        }
        else
        {
            alert("Browser refresh button is clicked...");
        }
    }

Weitere Informationen finden Sie unter diesem Link http://www.codeproject.com/Articles/696526/Solution-to-Browser-Back-Button-Click-Event-Handli

Sicher Ramar
quelle
8
@ MunamYousuf Es ist ziemlich offensichtlich, warum dieser Code nicht wirklich funktioniert. Es verfolgt die Zurück-Schaltfläche des Browsers, aber die Schaltfläche befindet sich außerhalb des Ansichtsfensters, daher sollten die Koordinaten clientX und clientY nicht verfügbar sein. Angenommen, es funktioniert, wie wäre es mit iOS? Der Zurück-Button befindet sich unten ... Auch die Art und Weise, wie er geschrieben ist, ist sehr ineffizient. Er ist eine Bedingung für jedes einzelne ausgelöste Ereignis. Gott, es ist so schlimm, dass ich ihm eine Abwertung geben werde.
James Wong - Wiedereinsetzung Monica
Das ist schrecklich! warum würdest du so etwas tun? : / und es wird nicht einmal funktionieren, wie James sagte.
Msqar