JS DOM: как остановить запуск события click?
Я пытаюсь заставить мои кнопки перестать работать при выполнении определенного условия. По какой-то причине, когда я набираю 5 очков с обеих сторон, это просто продолжается и даже не отображается счет, и я не знаю почему. Я пробовал использовать цикл while, но он продолжал давать сбой. Есть ли простой способ просто отключить его, как в jQuery?
Все работает отлично, кроме функции «конец игры». Заранее благодарим за помощь или критику!
3 ответа
Как отключить событие «клик»
У людей в комментариях есть блестящие идеи о том, как можно улучшить свою игру. Я предлагаю изучить это. Хотя, если вы хотите предотвратить события щелчка, есть несколько способов добиться этого.
1. Добавьте к кнопке атрибут disabled.
2. Добавьте свойство CSS pointer-events: none;
Второй метод предназначен для ситуации, когда вам не нужно указывать пользователю, что с кнопкой больше нельзя взаимодействовать.
3. Предотвратить событие по умолчанию.
4. Удалите прослушиватель событий.
Я бы ничего не отключал. Вместо этого просто добавляйте и удаляйте классы. Вот очень простая игра RockPaperScissors . Я поместил небольшую библиотеку над // magic under here . Надеюсь, вы сможете кое-что узнать здесь:
И приветствую Чарльза. Итак, как упомянул @StackSlave, вы продолжаете запрашивать computerPlay() , что исказит результаты, вероятно, в пользу последнего else (для каждой кнопки соответственно). Это логическая ошибка — но программа все равно будет работать.
Вы очень много пытаетесь сделать с событиями onclick и не обращаете внимания ни на какой индикатор включения. Итак .. поехали. Я разделил программу на две части:
- Круглый
- Ui
Round принимает выбор пользователя, генерирует выбор компьютера и сообщает результат. Ui прикрепляет кнопки к выбору одной из опций в раунде, генерированию некоторого вывода, обновлению результатов и, возможно, завершению игры. Также есть reset на Ui , который позволит вам начать новую игру;) Примечание. Я сгруппировал вещи в объекты (а не просто функции), так как каждая часть отслеживает небольшое состояние. Я, скорее всего, предоставлю константы вверху (rock..cscore) конструктору Ui , а не буду использовать глобальные переменные.
Действия браузера по умолчанию
Многие события автоматически влекут за собой действие браузера.
- Клик по ссылке инициирует переход на новый URL.
- Нажатие на кнопку «отправить» в форме – отсылку её на сервер.
- Зажатие кнопки мыши над текстом и её движение в таком состоянии – инициирует его выделение.
Если мы обрабатываем событие в JavaScript, то зачастую такое действие браузера нам не нужно. К счастью, его можно отменить.
Отмена действия браузера
Есть два способа отменить действие браузера:
- Основной способ – это воспользоваться объектом event . Для отмены действия браузера существует стандартный метод event.preventDefault() .
- Если же обработчик назначен через on<событие> (не через addEventListener ), то также можно вернуть false из обработчика.
В следующем примере при клике по ссылке переход не произойдёт:
Обычно значение, которое возвращает обработчик события, игнорируется.
Единственное исключение – это return false из обработчика, назначенного через on<событие> .
В других случаях return не нужен, он никак не обрабатывается.
Пример: меню
Рассмотрим меню для сайта, например:
Данный пример при помощи CSS может выглядеть так:
В HTML-разметке все элементы меню являются не кнопками, а ссылками, то есть тегами <a> . В этом подходе есть некоторые преимущества, например:
- Некоторые посетители очень любят сочетание «правый клик – открыть в новом окне». Если мы будем использовать <button> или <span> , то данное сочетание работать не будет.
- Поисковые движки переходят по ссылкам <a href=". "> при индексации.
Поэтому в разметке мы используем <a> . Но нам необходимо обрабатывать клики в JavaScript, а стандартное действие браузера (переход по ссылке) – отменить.
Например, вот так:
Если мы уберём return false , то после выполнения обработчика события браузер выполнит «действие по умолчанию» – переход по адресу из href . А это нам здесь не нужно, мы обрабатываем клик сами.
Кстати, использование здесь делегирования событий делает наше меню очень гибким. Мы можем добавить вложенные списки и стилизовать их с помощью CSS – обработчик не потребует изменений.
Некоторые события естественным образом вытекают друг из друга. Если мы отменим первое событие, то последующие не возникнут.
Например, событие mousedown для поля <input> приводит к фокусировке на нём и запускает событие focus . Если мы отменим событие mousedown , то фокусирования не произойдёт.
В следующем примере попробуйте нажать на первом <input> – происходит событие focus . Но если вы нажимаете по второму элементу, то события focus не будет.
Это потому, что отменено стандартное действие mousedown . Впрочем, фокусировка на элементе всё ещё возможна, если мы будем использовать другой способ. Например, нажатием клавиши Tab можно перейти от первого поля ввода ко второму. Но только не через клик мышью на элемент, это больше не работает.
Опция «passive» для обработчика
Необязательная опция passive: true для addEventListener сигнализирует браузеру, что обработчик не собирается выполнять preventDefault() .
Почему это может быть полезно?
Есть некоторые события, как touchmove на мобильных устройствах (когда пользователь перемещает палец по экрану), которое по умолчанию начинает прокрутку, но мы можем отменить это действие, используя preventDefault() в обработчике.
Поэтому, когда браузер обнаружит такое событие, он должен для начала запустить все обработчики и после, если preventDefault не вызывается нигде, он может начать прокрутку. Это может вызвать ненужные задержки в пользовательском интерфейсе.
Опция passive: true сообщает браузеру, что обработчик не собирается отменять прокрутку. Тогда браузер начинает её немедленно, обеспечивая максимально плавный интерфейс, параллельно обрабатывая событие.
Для некоторых браузеров (Firefox, Chrome) опция passive по умолчанию включена в true для таких событий, как touchstart и touchmove .
event.defaultPrevented
Свойство event.defaultPrevented установлено в true , если действие по умолчанию было предотвращено, и false , если нет.
Рассмотрим практическое применение этого свойства для улучшения архитектуры.
Помните, в главе Всплытие и погружение мы говорили о event.stopPropagation() и упоминали, что останавливать «всплытие» – плохо?
Иногда вместо этого мы можем использовать event.defaultPrevented , чтобы просигналить другим обработчикам, что событие обработано.
Давайте посмотрим практический пример.
По умолчанию браузер при событии contextmenu (клик правой кнопкой мыши) показывает контекстное меню со стандартными опциями. Мы можем отменить событие по умолчанию и показать своё меню, как здесь:
Как запретить клик на JS, для элементов без нужного класса?
Просто вам нужно блокировать «все остальные» по условию, значит выделить нужно вообще все и проверять условие.
Кроме того, такая схема более живучая в плане динамики. То есть если классы добавятся или убавятся, это будет сразу учтено. Но если вы железно повесите блокировку, то при добавлении класса из белого списка блокировка не снимется.
Как запретить клик по элементу js
Description: Remove an event handler.
version added: 1.7 .off( events [, selector ] [, handler ] )
version added: 1.7 .off( events [, selector ] )
version added: 1.7 .off( event )
version added: 1.7 .off()
The .off() method removes event handlers that were attached with .on() . See the discussion of delegated and directly bound events on that page for more information. Calling .off() with no arguments removes all handlers attached to the elements. Specific event handlers can be removed on elements by providing combinations of event names, namespaces, selectors, or handler function names. When multiple filtering arguments are given, all of the arguments provided must match for the event handler to be removed.
If a simple event name such as "click" is provided, all events of that type (both direct and delegated) are removed from the elements in the jQuery set. When writing code that will be used as a plugin, or simply when working with a large code base, best practice is to attach and remove events using namespaces so that the code will not inadvertently remove event handlers attached by other code. All events of all types in a specific namespace can be removed from an element by providing just a namespace, such as ".myPlugin" . At minimum, either a namespace or event name must be provided.
To remove specific delegated event handlers, provide a selector argument. The selector string must exactly match the one passed to .on() when the event handler was attached. To remove all delegated events from an element without removing non-delegated events, use the special value "**" .
A handler can also be removed by specifying the function name in the handler argument. When jQuery attaches an event handler, it assigns a unique id to the handler function. Handlers proxied by jQuery.proxy() or a similar mechanism will all have the same unique id (the proxy function), so passing proxied handlers to .off may remove more handlers than intended. In those situations it is better to attach and remove event handlers using namespaces.
As with .on() , you can pass events as an object instead of specifying an events string and handler function as separate arguments. The keys for the events object are events and/or namespaces; the values are handler functions or the special value false .