Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Запрет события Click на дочернем элементе, кот. находится за рамками родителя (https://javascript.ru/forum/events/42776-zapret-sobytiya-click-na-dochernem-ehlemente-kot-nakhoditsya-za-ramkami-roditelya.html)

Smokvin 09.11.2013 02:53

Запрет события Click на дочернем элементе, кот. находится за рамками родителя
 
Здравствуйте.
При привязке события click к родителю, событие срабатывает и при клике на дочерние элементы. Проблема состоит в том, что у меня дочерние элементы иногда выходят за рамки родителя, к которому привязано событие. Нужно при этом запретить вызов события при клике на тот участок, что выходит за рамки родителя.

Google может много рассказать о том, как запретить вызов события при клике на дочерний элемент. Но мне нужен полный запрет дочернего элемента. Нужен запрет только на том участке дочернего элемента, который выходит за рамки родителя.

Ссылка на песочницу - http://jsfiddle.net/7uw5b/ - с демонстрацией проблемы. В комментариях ещё раз описана задача.

Если перефразировать, то нужно чтобы клик вызывался только при клике на область в пределах границ родителя и никак не реагировал при клике на дочерние элементы, которые полностью "ВНЕ ГРАНИЦ" родителя или на УЧАСТКИ дочерних элементов, которые находятся вне границ родителя.

Подобное вообще возможно?
Буду благодарен любым подсказкам.
PS: В примере иcпользуется jQuery, но против ответов на чистом JS также ничего не имею.

Заранее благодарю.

cyber 09.11.2013 04:03

Smokvin, http://jsfiddle.net/7uw5b/1/

Smokvin 09.11.2013 04:36

Цитата:

Сообщение от cyber (Сообщение 280187)

Спасибо за попытку помочь, но перечитайте, пожалуйста, ещё раз вопрос. Нужно, чтобы вызывался обработчик по клику на родитель (зелёная область) и при клике на том участке дочернего элемента (часть красной области), которая находится "в границах" зелёной области. А если кликнуть по тому "выпирающему" кусочку дочернего элемента, то обработчик не должен срабатывать.

В Вашем же варианте обработчик срабатывает по всей области дочернего элемента и не работает при клике по родителю.

Smokvin 09.11.2013 04:41

Повторюсь на всякий случай:

Песочница - http://jsfiddle.net/7uw5b/

Задача:
- При клике на зелёную область должно срабатывать.
- При клике на часть красной области, которая находится "в пределах" родителя, должно срабатывать.
- При клике на часть красной области, которая находится "ВНЕ пределов" родителя, НЕ должно срабатывать.

BETEPAH 09.11.2013 13:21

Последние два условия задачи как бы намекают, что необходимо разбить красную область на две.
Или костыли такие, например, ставить: http://jsfiddle.net/BETEPAH/7uw5b/3/

cyber 09.11.2013 13:55

Smokvin, вот решение http://jsfiddle.net/bsQR3/

Smokvin 09.11.2013 14:58

BETEPAH, они то намекают, но этого нельзя делать.


cyber, огромное спасибо. То, что нужно ))

nikolya223 09.11.2013 23:32

помоему кто то перемудрил... ) всё куда проще
http://jsfiddle.net/nikolya223/v6sX7/

cyber 09.11.2013 23:55

nikolya223, угу pointer-events такая хорошая поддержка браузерами http://caniuse.com/pointer-events

nikolya223 10.11.2013 00:09

оке (действительно, на поддержку не посмотрел =)
так? http://jsfiddle.net/nikolya223/QCsGa/ =)


Часовой пояс GMT +3, время: 17:54.