Как отключить событие щелчка мыши браузера края с помощью JavaScript / jquery / Angularjs [duplicate]

Я считаю, что идеальное решение на самом деле довольно простое, что я использовал уже много лет.

Он в основном назначает событие «onbeforeunload» окна вместе с текущим документом «mouseenter» / «mouseleave», события, поэтому предупреждение срабатывает только тогда, когда клики находятся за пределами области документа (которая может быть либо обратной, либо прямой кнопкой браузера)

$(document).on('mouseenter', function(e) { 
        window.onbeforeunload = null; 
    }
);

$(document).on('mouseleave', function(e) { 
        window.onbeforeunload = function() { return "You work will be lost."; };
    }
);

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

<script language="JavaScript">
$(document).ready(function() {
$(document).unbind('keydown').bind('keydown', function (event) {
    var doPrevent = false;


    if (event.keyCode === 8 ) {
        var d = event.srcElement || event.target;
        if ((d.tagName.toUpperCase() === 'INPUT' && 
             (
                 d.type.toUpperCase() === 'TEXT' ||
                 d.type.toUpperCase() === 'PASSWORD' || 
                 d.type.toUpperCase() === 'FILE' || 
                 d.type.toUpperCase() === 'EMAIL' || 
                 d.type.toUpperCase() === 'SEARCH' || 
                 d.type.toUpperCase() === 'DATE' )
             ) || 
             d.tagName.toUpperCase() === 'TEXTAREA') {
            doPrevent = d.readOnly || d.disabled;
        }
        else {

            doPrevent = true;
        }
    }

    if (doPrevent) {
        event.preventDefault();
    }

    try {
        document.addEventListener('keydown', function (e) {
               if ((e.keyCode === 13)){
                  // alert('Enter keydown');
                   e.stopPropagation();
                   e.preventDefault();
               }



           }, true);
        } catch (err) {}
    });
});
</script>

//"use strict";
function stopBackSpace(e) {
    var ev = e || window.event;
    var obj = ev.target || ev.srcElement;
    var t = obj.type || obj.getAttribute('type');

    var vReadOnly = obj.getAttribute('readonly');
    var vEnabled = obj.getAttribute('enabled');
    // null
    vReadOnly = (vReadOnly == null) ? false : vReadOnly;
    vEnabled = (vEnabled == null) ? true : vEnabled;
    // when click Backspace,judge the type of obj.

    var flag1 = ((t == 'password' || t == 'text' || t == 'textarea') && ((vReadOnly == true || vReadOnly == 'readonly') || vEnabled != true)) ? true : false;

    var flag2 = (t != 'password' && t != 'text' && t != 'textarea') ? true : false;

    if (flag2) {
        e.keyCode = 0;
        e.cancelBubble = true;
        return false;
    }
    if (flag1) {
        e.keyCode = 0;
        e.cancelBubble = true;
        return false;
    }
}
if (typeof($) == 'function') {
    $(function() {
        $(document).keydown(function(e) {
            if (e.keyCode == 8) {
                return stopBackSpace(e);
            }
        });
    });
} else {
    document.onkeydown = stopBackSpace;
}

Как правило, это плохая идея, которая переопределяет поведение браузера по умолчанию.

Спрашивается также несколько похожих вопросов,

• Как я могу предотвратить
• Как предотвратить повторное действие истории браузера по умолчанию для кнопки backspace с JavaScript?

Вы не может фактически отключить кнопку назад. Однако вы можете использовать магию, используя свою логику, чтобы пользователь не мог перемещаться назад, что создаст впечатление, так как оно отключено. Вот как, посмотрите следующий фрагмент.

(function (global) { 

    if(typeof (global) === "undefined") {
        throw new Error("window is undefined");
    }

    var _hash = "!";
    var noBackPlease = function () {
        global.location.href += "#";

        // making sure we have the fruit available for juice (^__^)
        global.setTimeout(function () {
            global.location.href += "!";
        }, 50);
    };

    global.onhashchange = function () {
        if (global.location.hash !== _hash) {
            global.location.hash = _hash;
        }
    };

    global.onload = function () {            
        noBackPlease();

        // disables backspace on page except on input fields and textarea..
        document.body.onkeydown = function (e) {
            var elm = e.target.nodeName.toLowerCase();
            if (e.which === 8 && (elm !== 'input' && elm  !== 'textarea')) {
                e.preventDefault();
            }
            // stopping event bubbling up the DOM tree..
            e.stopPropagation();
        };          
    }

})(window);

Это в чистом JavaScript, поэтому он будет работать в большинстве браузеров. Он также отключит клавишу backspace , но клавиша будет нормально работать внутри полей input и textarea.

Рекомендуемая настройка:

Поместите этот фрагмент в отдельный сценарий и включить его на страницу, где вы хотите этого поведения. В текущей настройке он выполнит событие onload DOM, которое является идеальной точкой входа для этого кода.

Working DEMO!

Протестировано и проверено в следующие браузеры,

• Chrome.
• Firefox.
• IE (8-11) и Edge.
• Safari.

Эта статья на jordanhollinger.com - лучший вариант, который я чувствую. Похоже на ответ Razor, но немного яснее. Код ниже; полные кредиты Иорданию Холлингеру:

Страница до:

<a href="/page-of-no-return.htm#no-back>You can't go back from the next page</a>

Страница без возврата JavaScript:

// It works without the History API, but will clutter up the history
var history_api = typeof history.pushState !== 'undefined'

// The previous page asks that it not be returned to
if ( location.hash == '#no-back' ) {
  // Push "#no-back" onto the history, making it the most recent "page"
  if ( history_api ) history.pushState(null, '', '#stay')
  else location.hash = '#stay'

  // When the back button is pressed, it will harmlessly change the url
  // hash from "#stay" to "#no-back", which triggers this function
  window.onhashchange = function() {
    // User tried to go back; warn user, rinse and repeat
    if ( location.hash == '#no-back' ) {
      alert("You shall not pass!")
      if ( history_api ) history.pushState(null, '', '#stay')
      else location.hash = '#stay'
    }
  }
}

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

Я создаю одну HTML-страницу (index.html). Я также создаю один (механизм.js) внутри директории / script (script). Затем я размещаю весь контент внутри (index.html), используя теги формы, таблицы, span и div. Теперь вот трюк, который заставит обратно / вперед ничего не делать!

Во-первых, тот факт, что у вас есть только одна страница! Во-вторых, использование JavaScript с тегами span / div для скрытия и отображения содержимого на одной странице при необходимости через регулярные ссылки!

Inside 'index.html':

    <td width="89px" align="right" valign="top" style="letter-spacing:1px;">
     <small>
      <b>
       <a href="#" class="traff" onClick="DisplayInTrafficTable();">IN</a>&nbsp;
      </b>
     </small>
     [&nbsp;<span id="inCountSPN">0</span>&nbsp;]
    </td>

Внутри «mechan.js»:

    function DisplayInTrafficTable()
    {
     var itmsCNT = 0;
     var dsplyIn = "";
     for ( i=0; i<inTraffic.length; i++ )
     {
      dsplyIn += "<tr><td width='11'></td><td align='right'>" + (++itmsCNT) + "</td><td width='11'></td><td><b>" + inTraffic[i] + "</b></td><td width='11'></td><td>" + entryTimeArray[i] + "</td><td width='11'></td><td>" + entryDateArray[i] + "</td><td width='11'></td></tr>";
     }
     document.getElementById('inOutSPN').innerHTML = "" +
                                             "<table border='0' style='background:#fff;'><tr><th colspan='21' style='background:#feb;padding:11px;'><h3 style='margin-bottom:-1px;'>INCOMING TRAFFIC REPORT</h3>" + DateStamp() + "&nbsp;&nbsp;-&nbsp;&nbsp;<small><a href='#' style='letter-spacing:1px;' onclick='OpenPrintableIn();'>PRINT</a></small></th></tr><tr style='background:#eee;'><td></td><td><b>###</b></td><td></td><td><b>ID #</b></td><td></td><td width='79'><b>TYPE</b></td><td></td><td><b>FIRST</b></td><td></td><td><b>LAST</b></td><td></td><td><b>PLATE #</b></td><td></td><td><b>COMPANY</b></td><td></td><td><b>TIME</b></td><td></td><td><b>DATE</b></td><td></td><td><b>IN / OUT</b></td><td></td></tr>" + dsplyIn.toUpperCase() + "</table>" +
                                             "";
     return document.getElementById('inOutSPN').innerHTML;
    }

Он выглядит волосатым, но обратите внимание на имена и вызовы функций, встроенный HTML и вызовы id тега span. Это должно было показать, как вы можете вводить разные HTML-теги в те же теги span на той же странице! Как Back / Forward могут повлиять на этот дизайн? Это невозможно, потому что вы скрываете объекты и заменяете других на одной странице!

Как скрыть и отобразить? Здесь: Внутренние функции в «mechan.js» по мере необходимости используют:

    document.getElementById('textOverPic').style.display = "none"; //hide
    document.getElementById('textOverPic').style.display = "";     //display

Функции вызова «index.html» внутри ссылок:

    <img src="images/someimage.jpg" alt="" />
    <span class="textOverPic" id="textOverPic"></span>

и

    <a href="#" style="color:#119;font-size:11px;text-decoration:none;letter-spacing:1px;" onclick="HiddenTextsManager(1);">Introduction</a>

Надеюсь, у меня не было головной боли. Извините, если я сделал: -)

<html>
<head>
    <title>Disable Back Button in Browser - Online Demo</title>
    <style type="text/css">
        body, input {
            font-family: Calibri, Arial;
        }
    </style>
    <script type="text/javascript">
        window.history.forward();
        function noBack() {
            window.history.forward();
        }
    </script>
</head>
<body onload="noBack();" onpageshow="if (event.persisted) noBack();" onunload="">
    <H2>Demo</H2>
    <p>This page contains the code to avoid Back button.</p>
    <p>Click here to Goto <a href="noback.html">NoBack Page</a></p>
</body>
</html>

Очень простая и чистая функция, чтобы сломать обратную стрелку, не мешая странице после этого.

Преимущества:

• Загружает мгновенно и восстанавливает исходный хеш, поэтому пользователь isn 't отвлекается по URL-адресу, заметно меняющимся.
• Пользователь все равно может выйти, нажав 10 раз (это хорошо), но не случайно
• Отсутствие пользовательских помех, например, других решений, использующих onbeforeunload
• Он работает только один раз и не мешает дальнейшим манипуляциям с хэшем в случае, если вы используете это для отслеживания состояния
• Восстанавливает оригинальный хеш, поэтому почти невидим.
• ] Использует setInterval, поэтому он не прерывает медленные браузеры и всегда работает.
• Чистый Javascript, не требует истории HTML5, работает повсеместно.
• Unobrusive, просто и хорошо играет с другим кодом.
• Не использует unbeforeunload, который прерывает пользователя с модальным диалогом.
• Он просто работает без суеты.

Примечание: некоторые из других решений используют onbeforeunload. Пожалуйста, не используйте onbeforeunload для этой цели, который выдает диалог, когда пользователи пытаются закрыть окно, ударить по воротам и т. Д. Модалы типа onbeforeunload обычно подходят только в редких случаях, например, когда они действительно сделали изменения на экране и не сохранили их, но не для этой цели.

Как это работает

1. Выполняется при загрузке страницы
2. Сохраняет исходный хеш (если он находится в URL-адресе).
3. Последовательно добавляет # / noop / {1..10} к хэшу
4. Восстанавливает исходный хэш

Вот и все.

Использовать его за одну секунду

Чтобы развернуть, просто добавьте это где угодно на своей странице или в вашем JS:

<script>
/* break back button */                                                                        
window.onload=function(){                                                                      
  var i=0; var previous_hash = window.location.hash;                                           
  var x = setInterval(function(){                                                              
    i++; window.location.hash = "/noop/" + i;                                                  
    if (i==10){clearInterval(x);                                                               
      window.location.hash = previous_hash;}                                                   
  },10);
}
</script>

Этот код отключит кнопку «Назад» для современных браузеров, которые поддерживают API истории HTML5. При нормальных обстоятельствах нажатие кнопки «Назад» возвращается на один шаг назад на предыдущую страницу. Если вы используете history.pushState (), вы начинаете добавлять дополнительные подэтапы на текущую страницу. Как это работает, если вы будете использовать history.pushState () три раза, тогда начните нажимать кнопку «Назад», первые три раза он будет перемещаться назад на этих подэтапах, а затем в четвертый раз он вернется к на предыдущей странице.

Если вы комбинируете это поведение с прослушивателем событий в событии popstate, вы можете по существу создать бесконечный цикл под-состояний. Таким образом, вы загружаете страницу, нажимаете суб-состояние, затем нажимаете кнопку «Назад», которая выдает вспомогательное состояние, а также толкает другую, поэтому, если вы снова нажмете кнопку «Назад», она никогда не выйдет из под-состояний, чтобы нажать , Если вы считаете, что необходимо отключить кнопку «Назад», это приведет вас туда.

history.pushState(null, null, 'no-back-button');
window.addEventListener('popstate', function(event) {
  history.pushState(null, null, 'no-back-button');
});