Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 09.11.2013, 02:53
Интересующийся
Отправить личное сообщение для Smokvin Посмотреть профиль Найти все сообщения от Smokvin
 
Регистрация: 31.03.2012
Сообщений: 20

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

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

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

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

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

Заранее благодарю.
Ответить с цитированием
  #2 (permalink)  
Старый 09.11.2013, 04:03
Аватар для cyber
I am Student
Отправить личное сообщение для cyber Посмотреть профиль Найти все сообщения от cyber
 
Регистрация: 17.12.2011
Сообщений: 4,415

Smokvin, http://jsfiddle.net/7uw5b/1/
__________________
Цитата:
Если ограничения и условия описываются как "коробка", то хитрость в том что бы найти именно коробку... Не думайте о чем то глобальном - найдите коробку.
Ответить с цитированием
  #3 (permalink)  
Старый 09.11.2013, 04:36
Интересующийся
Отправить личное сообщение для Smokvin Посмотреть профиль Найти все сообщения от Smokvin
 
Регистрация: 31.03.2012
Сообщений: 20

Сообщение от cyber Посмотреть сообщение
Smokvin, http://jsfiddle.net/7uw5b/1/
Спасибо за попытку помочь, но перечитайте, пожалуйста, ещё раз вопрос. Нужно, чтобы вызывался обработчик по клику на родитель (зелёная область) и при клике на том участке дочернего элемента (часть красной области), которая находится "в границах" зелёной области. А если кликнуть по тому "выпирающему" кусочку дочернего элемента, то обработчик не должен срабатывать.

В Вашем же варианте обработчик срабатывает по всей области дочернего элемента и не работает при клике по родителю.
Ответить с цитированием
  #4 (permalink)  
Старый 09.11.2013, 04:41
Интересующийся
Отправить личное сообщение для Smokvin Посмотреть профиль Найти все сообщения от Smokvin
 
Регистрация: 31.03.2012
Сообщений: 20

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

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

Задача:
- При клике на зелёную область должно срабатывать.
- При клике на часть красной области, которая находится "в пределах" родителя, должно срабатывать.
- При клике на часть красной области, которая находится "ВНЕ пределов" родителя, НЕ должно срабатывать.
Ответить с цитированием
  #5 (permalink)  
Старый 09.11.2013, 13:21
Аватар для BETEPAH
Профессор
Отправить личное сообщение для BETEPAH Посмотреть профиль Найти все сообщения от BETEPAH
 
Регистрация: 23.06.2011
Сообщений: 1,165

Последние два условия задачи как бы намекают, что необходимо разбить красную область на две.
Или костыли такие, например, ставить: http://jsfiddle.net/BETEPAH/7uw5b/3/
Ответить с цитированием
  #6 (permalink)  
Старый 09.11.2013, 13:55
Аватар для cyber
I am Student
Отправить личное сообщение для cyber Посмотреть профиль Найти все сообщения от cyber
 
Регистрация: 17.12.2011
Сообщений: 4,415

Smokvin, вот решение http://jsfiddle.net/bsQR3/
__________________
Цитата:
Если ограничения и условия описываются как "коробка", то хитрость в том что бы найти именно коробку... Не думайте о чем то глобальном - найдите коробку.
Ответить с цитированием
  #7 (permalink)  
Старый 09.11.2013, 14:58
Интересующийся
Отправить личное сообщение для Smokvin Посмотреть профиль Найти все сообщения от Smokvin
 
Регистрация: 31.03.2012
Сообщений: 20

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


cyber, огромное спасибо. То, что нужно ))
Ответить с цитированием
  #8 (permalink)  
Старый 09.11.2013, 23:32
Интересующийся
Отправить личное сообщение для nikolya223 Посмотреть профиль Найти все сообщения от nikolya223
 
Регистрация: 09.11.2013
Сообщений: 15

помоему кто то перемудрил... ) всё куда проще
http://jsfiddle.net/nikolya223/v6sX7/
Ответить с цитированием
  #9 (permalink)  
Старый 09.11.2013, 23:55
Аватар для cyber
I am Student
Отправить личное сообщение для cyber Посмотреть профиль Найти все сообщения от cyber
 
Регистрация: 17.12.2011
Сообщений: 4,415

nikolya223, угу pointer-events такая хорошая поддержка браузерами http://caniuse.com/pointer-events
__________________
Цитата:
Если ограничения и условия описываются как "коробка", то хитрость в том что бы найти именно коробку... Не думайте о чем то глобальном - найдите коробку.
Ответить с цитированием
  #10 (permalink)  
Старый 10.11.2013, 00:09
Интересующийся
Отправить личное сообщение для nikolya223 Посмотреть профиль Найти все сообщения от nikolya223
 
Регистрация: 09.11.2013
Сообщений: 15

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск