Я использую этот код:
$('body').click(function() {
$('.form_wrapper').hide();
});
$('.form_wrapper').click(function(event){
event.stopPropagation();
});
И этот HTML :
<div class="form_wrapper">
<a class="agree" href="javascript:;">I Agree</a>
<a class="disagree" href="javascript:;">Disagree</a>
</div>
Проблема в том, что у меня есть ссылки внутри div
и когда они больше не работают при нажатии.
$('html')
или$(document)
будет лучше, чем$('body')
Ответы:
Была такая же проблема, придумал это простое решение. Это даже работает рекурсивно:
источник
$("YOUR CONTAINER SELECTOR").unbind( 'click', clickDocument );
только рядом.hide()
. Такdocument
что не слушайте клики.$(document).on("mouseup.hideDocClick", function () { ... });
в функции, которая открывает контейнер, и$(document).off('.hideDocClick');
в функции скрытия. Используя пространства имен, я не удаляю других возможныхmouseup
слушателей, прикрепленных к документу.Вы бы лучше пойти с чем-то вроде этого:
источник
hover
обработчике событий, который открывает много возможностей.(function() { // ... code })();
Я не помню название этой модели, но она очень полезна! Все ваши объявленные переменные будут находиться внутри функции и не будут загрязнять глобальное пространство имен.Этот код обнаруживает любое событие нажатия на странице, а затем скрывает
#CONTAINER
элемент, если и только если элемент, по которому щелкнули, не был ни#CONTAINER
элементом, ни одним из его потомков.источник
Возможно, вы захотите проверить цель события click, которое запускается для тела, а не полагаться на stopPropagation.
Что-то вроде:
Кроме того, элемент body может не включать все визуальное пространство, отображаемое в браузере. Если вы заметили, что ваши клики не регистрируются, вам может понадобиться добавить обработчик кликов для элемента HTML.
источник
e.stopPropagation();
если у вас есть другой слушатель щелчкаform_wrapper
когда вы нажимаете на одного из его дочерних элементов, что не является желаемым поведением. Вместо этого используйте ответ prc322.Live DEMO
Проверьте, что область щелчка не находится в целевом элементе или в его дочернем элементе.
ОБНОВИТЬ:
JQuery остановить распространение является лучшим решением
Live DEMO
источник
clicked
один. В противном случае этоstopPropagation
сделало бы возможным открытие нескольких раскрывающихся списков одновременно.источник
Обновил решение до:
var mouseOverActiveElement = false;
источник
.live
сейчас устарела ; используйте.on
вместо.Решение без jQuery для самого популярного ответа :
MDN: https://developer.mozilla.org/en/docs/Web/API/Node/contains
источник
bind
там не работает. Не могли бы вы исправить эту функцию, чтобы она работала?Живая демоверсия с ESCфункциональностью
Работает как на настольном, так и на мобильном
Если в каком-то случае вам нужно быть уверенным, что ваш элемент действительно виден, когда вы нажимаете на документ:
if($pop.is(':visible') && (notH||e.which==27)) $pop.hide();
источник
Не будет ли что-то подобное этой работой?
или
источник
.form_wrapper
когда вы нажимаете на своих детей (среди других проблем).Даже спальный
источник
.wrapper
независимо от того, где вы нажимаете на страницу, а это не то, о чем просили.Вместо прослушивания каждого отдельного щелчка по DOM, чтобы скрыть один конкретный элемент, вы можете установить
tabindex
родительский<div>
и прослушатьfocusout
события.Установка
tabindex
убедится, чтоblur
события на<div>
(обычно это не так).Итак, ваш HTML будет выглядеть так:
И ваш JS:
источник
А для сенсорных устройств, таких как IPAD и IPHONE, мы можем использовать следующий код
источник
Вот jsfiddle, который я нашел в другом потоке, также работает с ключом esc: http://jsfiddle.net/S5ftb/404
источник
Построен из удивительного ответа prc322.
Это добавляет пару вещей ...
Я надеюсь, что это помогает кому-то!
источник
Если у вас проблемы с ios, mouseup не работает на устройстве Apple.
работает mousedown / mouseup в jquery для ipad?
я использую это:
источник
(Просто добавлю к ответу prc322.)
В моем случае я использую этот код, чтобы скрыть меню навигации, которое появляется, когда пользователь нажимает соответствующую вкладку. Я обнаружил, что было полезно добавить дополнительное условие, что цель клика за пределами контейнера не является ссылкой.
Это потому, что некоторые ссылки на моем сайте добавляют новый контент на страницу. Если этот новый контент добавляется одновременно с исчезновением навигационного меню, это может дезориентировать пользователя.
источник
Так много ответов, должно быть право прохода, чтобы добавить один ... Я не видел текущих (jQuery 3.1.1) ответов - так:
источник
источник
p
это имя элемента. Где также можно передать идентификатор или имя класса или элемента.источник
Верните false, если вы нажмете на .form_wrapper:
источник
Прикрепите событие click к элементам верхнего уровня за пределами оболочки формы, например:
Это также будет работать на сенсорных устройствах, просто убедитесь, что вы не включили родительский элемент .form_wrapper в свой список селекторов.
источник
FIDDLE
источник
источник
Скопировано с https://sdtuts.com/click-on-not-specified-element/
Живая демоверсия http://demos.sdtuts.com/click-on-specified-element
источник
я сделал это так:
источник
источник
С помощью этого кода вы можете скрыть столько элементов, сколько хотите
источник
Что вы можете сделать, это привязать событие щелчка к документу, который будет скрывать раскрывающийся список, если щелкнет что-то за пределами раскрывающегося списка, но не будет скрывать его, если щелкнуть что-то внутри раскрывающегося списка, поэтому ваше событие «показ» (или слайд-шоу или что-то еще) показывает выпадающий список)
Затем, скрывая его, открепите событие click
источник
Согласно документам ,
.blur()
работает больше, чем<input>
тег. Например:источник
div
никогда не размыто - события размытия не могут даже пузыриться от их детей. Наконец, даже если вышеупомянутое не соответствует действительности, это будет работать, только если вы удостоверились, что объект.form_wrapper
был в фокусе до того, как пользователь щелкнул его.