Как отменить переход по ссылке
JS Helper
JavaScript помощник для новичков
вторник, 22 февраля 2011 г.
Как отменить переход по ссылке или куда вставить return
Один из вопросов который возникает у новичка это:
И есть ссылка при клике на которую вызывается данная функция:
Дело в том что команда return false; указывает браузеру прекратить выполнение скрипта (в данном случае не переходить по адресу ссылки). К примеру если мы вернем значение true то переход будет осуществлен.
2) Как при клике на ссылку выполнить функции и после нее перейти по адресу ссылки
Тут есть два варианта, в зависимости от ситуации нужно выбрать тот который подойдет, а именно:
То есть, браузеру вернется то что вернет функция, а уже в конце функции мы указываем return true; Получается что браузер будет ждать окончания выполнении функции что бы получить ответ и знать что делать дальше.
Вот как может выглядеть такая функция:
После выполнения этой функции, будет выполнен переход по ссылке.
А вот так перехода по ссылке не будет:
Так как мы возвращаем ложь (false) что говорит браузеру прервать выполнение.
2.2) Программно сделать пере адресацию
Но иногда бывают ситуации когда необходимо дождаться не окончания выполнения нашей функции, а какой нибудь другой функции.
Вот к примеру такая ситуация:
Мы при клике на ссылку, хотим сделать анимацию (что бы ссылка переместилась) и после этого только сделать пере адресацию:
И ссылка:
В данном случае функция обратится к animate и не дождавшись окончания вернет значение true
Но нам нужно подождать 2 секунды пока выполнится анимация.
В данном случае мы возвращаем false, а в качестве callback-функции у анимации сделаем пере адресацию сами.
Вот так все должно выглядеть:
Вот пример кода выше:
Click me
Заключение
Ну вот как то так 🙂 Если что то не понятно, или хотите подправить меня, пишите в комментариях, и по вашим комментариям буду обновлять статью 🙂
Действия браузера по умолчанию
Многие события автоматически влекут за собой действие браузера.
Если мы обрабатываем событие в JavaScript, то зачастую такое действие браузера нам не нужно. К счастью, его можно отменить.
Отмена действия браузера
Есть два способа отменить действие браузера:
В следующем примере при клике по ссылке переход не произойдёт:
Обычно значение, которое возвращает обработчик события, игнорируется.
В других случаях return не нужен, он никак не обрабатывается.
Пример: меню
Рассмотрим меню для сайта, например:
Данный пример при помощи CSS может выглядеть так:
Кстати, использование здесь делегирования событий делает наше меню очень гибким. Мы можем добавить вложенные списки и стилизовать их с помощью CSS – обработчик не потребует изменений.
Некоторые события естественным образом вытекают друг из друга. Если мы отменим первое событие, то последующие не возникнут.
Опция «passive» для обработчика
Почему это может быть полезно?
Есть некоторые события, как touchmove на мобильных устройствах (когда пользователь перемещает палец по экрану), которое по умолчанию начинает прокрутку, но мы можем отменить это действие, используя preventDefault() в обработчике.
Поэтому, когда браузер обнаружит такое событие, он должен для начала запустить все обработчики и после, если preventDefault не вызывается нигде, он может начать прокрутку. Это может вызвать ненужные задержки в пользовательском интерфейсе.
Опция passive: true сообщает браузеру, что обработчик не собирается отменять прокрутку. Тогда браузер начинает её немедленно, обеспечивая максимально плавный интерфейс, параллельно обрабатывая событие.
event.defaultPrevented
Рассмотрим практическое применение этого свойства для улучшения архитектуры.
Помните, в главе Всплытие и погружение мы говорили о event.stopPropagation() и упоминали, что останавливать «всплытие» – плохо?
Давайте посмотрим практический пример.
По умолчанию браузер при событии contextmenu (клик правой кнопкой мыши) показывает контекстное меню со стандартными опциями. Мы можем отменить событие по умолчанию и показать своё меню, как здесь:
Теперь в дополнение к этому контекстному меню реализуем контекстное меню для всего документа.
При правом клике должно показываться ближайшее контекстное меню.
Как это поправить? Одно из решений – это подумать: «Когда мы обрабатываем правый клик в обработчике на кнопке, остановим всплытие», и вызвать event.stopPropagation() :
Теперь контекстное меню для кнопки работает как задумано. Но цена слишком высока. Мы навсегда запретили доступ к информации о правых кликах для любого внешнего кода, включая счётчики, которые могли бы собирать статистику, и т.п. Это слегка неразумно.
Как мы можем видеть, event.stopPropagation() и event.preventDefault() (также известный как return false ) – это две разные функции. Они никак не связаны друг с другом.
Есть также несколько альтернативных путей, чтобы реализовать вложенные контекстные меню. Одним из них является единый глобальный объект с обработчиком document.oncontextmenu и методами, позволяющими хранить в нём другие обработчики.
Объект будет перехватывать любой клик правой кнопкой мыши, просматривать сохранённые обработчики и запускать соответствующий.
Итого
Действий браузера по умолчанию достаточно много:
Все эти действия можно отменить, если мы хотим обработать событие исключительно при помощи JavaScript.
Технически, отменяя действия браузера по умолчанию и добавляя JavaScript, мы можем настроить поведение любого элемента. Например, мы можем заставить ссылку работать как кнопку, а кнопку вести себя как ссылка (перенаправлять на другой URL).
Но нам следует сохранять семантическое значение HTML элементов. Например, не кнопки, а тег должен применяться для переходов по ссылкам.
Помимо того, что это «хорошо», это делает ваш HTML лучше с точки зрения доступности для людей с ограниченными возможностями и с особых устройств.
Отмена перехода по ссылке через класс
При наведении на ссылку всплывает окошко инфы.
А по клику на ссылку переходит на адресат «link-to».
Как обыграть такое событие, чтобы по клику небыло перехода, а отменить/запретить переход по клику?
Мои попытки таковы:
Отмена перехода по ссылке
здравствуйте делаю ссылку на удаление отчёта. подтверждение удаления делаю с помощью confirm.
jQuery, запрет перехода по ссылке, Как запретить переход по ссылке, кликая по img внутри нее же?
есть такая конструкция 
когда нажимаю на картинку то.
Отмена Перехода На Зимнее Время
Добрый день. У меня проявилась следующая проблема. В клиента 8.5.1 Стандарт в календаре неверно.
Отмена перехода по DataGridView по нажатию Enter
Доброе утро всем! Вроде простая задача, а не могу сообразить как сделать. Нужно, чтобы после.
Отмена перехода на новую строку у textarea
Как отменить переход на новую строку, если пользователь жмёт Enter? И как можно переназначить.
Отмена перехода по ячейкам при нажатии на enter
Всем привет.Надо сделать так, чтобы при нажатии на enter курсор оставался в той же ячейки. Вот.
Jquery отменить переход по ссылке
В jQuery есть один интересный метод preventDefault(), который позволяет предотвратить возникновение «действия по умолчанию» для конкретного события. Например, если в разметке есть гиперссылка, но мы хотим использовать эту ссылку как кнопку button – т.е. без перехода по URL, заданному в атрибуте href, то используется как раз preventDefault().
В jQuery есть один интересный метод preventDefault(), который позволяет предотвратить возникновение «действия по умолчанию» для конкретного события. Например, если в разметке есть гиперссылка, но мы хотим использовать эту ссылку как кнопку button – т.е. без перехода по URL, заданному в атрибуте href, то используется как раз preventDefault(). 
После этого, всё, что необходимо сделать, – это добавить вызов preventDefault() в обработчик события клика мышью. Пример разметки и кода показан ниже:
1. Разметка. Создаем гиперссылку. В ней указан некоторый URL в атрибуте href. Но мы предотвратим переход по ссылке
2. Обработчик на jQuery. Добавляем в обработчик click вызов метода preventDefault(). Результат – отмена перехода по ссылке и вывод нашего сообщения.
Время от времени необходимо запретить пользователю переход по ссылке. Чаще всего я использую этот метод, если например, на какую-то ссылку назначен красивый стиль, а переделывать ее в другой тег желания нет.
Также бывает необходимо, чтобы при нажатии на ссылке срабатывал скрипт. В этом случае можно в href поставить #, но тогда при клике на ссылку страница проматывается вверх.
Запретить переход по ссылке можно с помощью css свойства или js скрипта.
css примеры блокировки переходы по ссылке.
Для этого используется свойство pointer-events: none, которое запрещает события указателя мыши для элементов с псевдоклассами active, click, hover. Особенность этого свойства в том, что если на эту ссылку назначено выполнение скрипта onclick, то он тоже не выполнится (пример, 2).
Пример 1. При клике на эту ссылку, перехода не произойдет.
Ссылка
Пример 2. При клике на эту ссылку не произойдет перехода и выполнение любого скрипта через событие onclick как при java Script-е, так и при jQuery.
Ссылка
Для более универсального использования, можно задать класс и назначить ему это свойства, а затем в той ссылке, где нужно ограничить переход просто ставить этот класс.
Запретить переход по ссылке через Java Script
Здесь имеется множество вариантов. Все они кроссбраузерные.
Пример 1. Просто запрещаем переход по ссылке:
Ссылка
Пример 2. Тоже самое, только в виде функции, которая сначала запрещает переход, а затем выводит сообщение:
Бонус на заметку
Кстати, за счет pointer-events вы можете немного защитить картинку от копирования. Чаще всего пользователи нажимают правой кнопкой мыши по картинке и выбирают «Сохранить изображение». Но если сделать так:
То при нажатии правой кнопкой мыши на картинку из контекстного меню исчезнут пункты «Открыть картинку в новой вкладке» и «Сохранить картинку». Согласитесь, это очень простой способ легкой защиты картинок от копирования без скриптов. Конечно, от всех он не защитит, но большая часть обычных пользователей не сможет копировать картинки вашего сайта.
Все о самостоятельном создании сайта
В этом посте мы рассмотри jQuery код который отменяет стандартную обработку ссылок, т.е. отменяет переход по указанному url в атрибуте href.
HTML код демо-примера:
jQuery код скрипта:
Переход по ссылке после подтверждение пользователем
По вопросам из комментариев, решил внести пример, когда пользователь должен подтвердить переход по ссылке.
4 thoughts on “ jQuery как запретить стандартную обработку ссылок? ”
Спасибо Вам. Очень интересный скрипт. А трудно ли сделать, чтобы в alert выскакивала форма подтверждения, которая бы содержала блокируемую ссылку? То есть, своеобразное подтверждение от пользователя, что он действительно хочет перейти по ссылке.
Для того чтобы пользователь мог подтвердить или отменить открытие ссылки, можно сделать вариант с применением метода javascript – confirm().
Пример кода вы я сохранил по этой ссылке: Переход по ссылке после подтверждением пользователя
Скажите, а как в примере “//jsfiddle.net/b9qz2aoy/” делать переход по ссылке в том же окне браузера, а не в новом? Спасибо!
Для этого можно воспользоваться location.href, вот пример: Открытия ссылки после подтверждения пользователем (в текущем окне). Если остались вопросы, пишите – помогу 😉
Добавить комментарий Отменить ответ
Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.
Как запретить переход по ссылке через css и js
Время от времени необходимо запретить пользователю переход по ссылке. Чаще всего я использую этот метод, если например, на какую-то ссылку назначен красивый стиль, а переделывать ее в другой тег желания нет.
Также бывает необходимо, чтобы при нажатии на ссылке срабатывал скрипт. В этом случае можно в href поставить #, но тогда при клике на ссылку страница проматывается вверх.
Запретить переход по ссылке можно с помощью css свойства или js скрипта.
css примеры блокировки переходы по ссылке.
Для этого используется свойство pointer-events: none, которое запрещает события указателя мыши для элементов с псевдоклассами active, click, hover. Особенность этого свойства в том, что если на эту ссылку назначено выполнение скрипта onclick, то он тоже не выполнится (пример, 2).
Пример 1. При клике на эту ссылку, перехода не произойдет.
Ссылка
Пример 2. При клике на эту ссылку не произойдет перехода и выполнение любого скрипта через событие onclick как при java Script-е, так и при jQuery.
Ссылка
Для более универсального использования, можно задать класс и назначить ему это свойства, а затем в той ссылке, где нужно ограничить переход просто ставить этот класс.
Запретить переход по ссылке через Java Script
Здесь имеется множество вариантов. Все они кроссбраузерные.
Пример 1. Просто запрещаем переход по ссылке:
Ссылка
Пример 2. Тоже самое, только в виде функции, которая сначала запрещает переход, а затем выводит сообщение:
Ссылка
Бонус на заметку
Кстати, за счет pointer-events вы можете немного защитить картинку от копирования. Чаще всего пользователи нажимают правой кнопкой мыши по картинке и выбирают «Сохранить изображение». Но если сделать так:
То при нажатии правой кнопкой мыши на картинку из контекстного меню исчезнут пункты «Открыть картинку в новой вкладке» и «Сохранить картинку». Согласитесь, это очень простой способ легкой защиты картинок от копирования без скриптов. Конечно, от всех он не защитит, но большая часть обычных пользователей не сможет копировать картинки вашего сайта.