Запрет события Click на дочернем элементе, кот. находится за рамками родителя
 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

nikolya223, ок, но только зачем ?

Интересное решение. Для моей задачи необходимо, чтобы click был привязан строго к родителю. Но возьму на заметку на будущее. :thanks: