Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 18.02.2013, 13:58
Аспирант
Отправить личное сообщение для NeVirus Посмотреть профиль Найти все сообщения от NeVirus
 
Регистрация: 09.01.2013
Сообщений: 54

Остановить распространение событий
Накидал такой вот код:
$('#sort_p_1').click(function() {                                           
				if ($('#sort_p_1').hasClass('sort_checked') === false){
					$('#sort_p_1').empty();
					$('#sort_p_1').append('Производитель <br>');
					$('#sort_p_1').toggleClass('sort_checked');
					$('#sort_p_1').append('<ul>');
					for ( i = 0 ; i < goods_manufacturers.length; i ++) { 
						$('#sort_p_1').append('<li class = "sort_manuf_p">'+ goods_manufacturers[i] +'</li>');
					}
					$('#sort_p_1').append('</ul>');
				}
				else {
					$('#sort_p_1').toggleClass('sort_checked'); 
					$('#sort_p_1').empty();
					$('#sort_p_1').append('Производитель - любой');
				}
			});
			
			$('.sort_manuf_p').live('click', function(event1) {                                                    
				flag1 = 0;
				for (i = 0; i <sort_manuf_p.length; i++)
					if (sort_manuf_p[i] == $(this).html()) {flag1 = 1; sort_manuf_p.splice(i, 1); end;} 
				if (flag1 === 0) {sort_manuf_p.push($(this).html());}
	/*			if (navigator.appName=='Microsoft Internet Explorer') {
					event1.returnValue=false;  // отменяем действие
					event1.cancelBubble=true;  // запрещаем всплывание
				} 
				else {
					event1.preventDefault();  // отменяем действие
					event1.stopPropagation(); // запрещаем всплывание
				}
	*/		});



Клик на элементе с классом "sort_manuf_p" ожидаемо идет вверх и вызывает событие по клику на "sort_p_1'" (убивая нужные мне эллементы) ... как этого избежать?
Закоментированный код был найден на просторах интернета и не работает... хотя почти все советы найденные в гугле точно такие же...

кто нибудь может сказать в чем моя ошибка?
Ответить с цитированием
  #2 (permalink)  
Старый 18.02.2013, 14:05
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,225

Сообщение от NeVirus
кто нибудь может сказать в чем моя ошибка?
Вот почитай статейку...
http://javascript.ru/tutorial/events...ovka-vsplytiya
Ответить с цитированием
  #3 (permalink)  
Старый 18.02.2013, 14:07
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

NeVirus,
Приведите минимальный HTML, точно обозначьте задачу
Ответить с цитированием
  #4 (permalink)  
Старый 18.02.2013, 14:31
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

<script type="text/javascript" src="http://yandex.st/jquery/1.7.2/jquery.min.js"></script>
<style>
  #Wrp span{
 margin:8px;
 display:inline-block;
}
  #Wrp .a{
 border:red solid 1px;
}
  #Wrp .b{
 border:blue solid 1px;
}
  #Wrp .c{
 border:green solid 1px;
}
</style>

        <div id="Wrp">
            <span class=c>ccc<span class=b>bbb<span class=a>aaa</span></span></span>
        </div>


<script type="text/javascript">
$("#Wrp span").live('click',function() {
  var a=$(this);
  if(a.find(".clikanutyj").length)return false;
  alert(a.attr("class")) //вместо alert - Ваш код обработки;
  a.addClass('clikanutyj');
  setTimeout(function() {a.removeClass('clikanutyj')},200)
});
</script>

Последний раз редактировалось Deff, 18.02.2013 в 16:29.
Ответить с цитированием
  #5 (permalink)  
Старый 18.02.2013, 14:36
Аспирант
Отправить личное сообщение для NeVirus Посмотреть профиль Найти все сообщения от NeVirus
 
Регистрация: 09.01.2013
Сообщений: 54

Сообщение от Deff Посмотреть сообщение
NeVirus,
Приведите минимальный HTML, точно обозначьте задачу
<div id = 'sort_menu'>
				<ul>
					<li id = 'sort_p_1'>Производитель - любой</li>
					<li id = 'sort_p_2'>Цена - любая</li>
					<li id = 'sort_p_3'>Наличие не обязательно</li>
				</ul>
				<div class = 'menu_b' id = "sort_b">Старт</div>
			</div>


Вот HTML от этого куска кода... я динамически создаю в пункте списка 'sort_p_1' еще 1 список с пунктами взятыми из массива (а массив ранее тащит из JSON но этого тут не видно да вроде и не играет роли)... затем по клику на этих новых пунктах они записываются в другой массив . Всё это работает - НО при клике на новых пунктах срабатывает так же и событие клика по главному списку (родителю динамических по иерархии) т.е. "распространяется событие", это особенность обращения через ".live" вот я и хочу знать как его остановить, т.к. оно мне не нужно
Ответить с цитированием
  #6 (permalink)  
Старый 18.02.2013, 14:42
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,225

Сообщение от NeVirus
я и хочу знать как его остановить
Это описано в статейке, ссылку я дал выше...
Ответить с цитированием
  #7 (permalink)  
Старый 18.02.2013, 15:08
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,121

NeVirus,
$('.sort_manuf_p').live('click', function(event1) {
event1.preventDefault();
далее ваш код .
так пробовали?
Ответить с цитированием
  #8 (permalink)  
Старый 18.02.2013, 17:14
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Народ, ответ был дан во втором комментарии, че вы тут херню всякую постите? Отмечу только что для jQuery все сводится просто к вызову w3c-метода, ибо event - это кроссбраузерная обертка jquery'иевская.
Ответить с цитированием
  #9 (permalink)  
Старый 19.02.2013, 07:00
Аспирант
Отправить личное сообщение для NeVirus Посмотреть профиль Найти все сообщения от NeVirus
 
Регистрация: 09.01.2013
Сообщений: 54

Спасибо всем отписавшимся.

Проблема оказалась глубже чем я думал... по какой то причине событие всплытия обрабатывается раньше чем собственно выполнение действий на клик на текущий элемент... т.е. "preventDefault" и "stopPropagation()" просто срабатывают ПОСЛЕ того как событие ушло вверх и не дают эффекта.
похоже без глубокого копания не обойтись... пошел потрошить мануалы\справочники.

Последний раз редактировалось NeVirus, 19.02.2013 в 07:03.
Ответить с цитированием
  #10 (permalink)  
Старый 19.02.2013, 08:33
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

NeVirus, live() на самом деле не навешивает обработчик на указанный элемент. Обработчик по сути навешивается на document (я так думаю) и срабатывает только когда событие "доплывет" до document. Нужно:
a) Не использовать live, а навешивать обработчик непосредственно (через click())
b) Проверять event.target в $('#sort_p_1').click()

Также метод preventDefault() не останавливает сплытие. Он просто отменяет действие по умолчанию (переход по ссылке например)
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Остановить таймер setInterval Орёл Общие вопросы Javascript 8 11.01.2015 22:07
Не получается остановить всплытие событий веснушка Events/DOM/Window 2 27.07.2012 12:24
остановить скрипт если мышка не двигалась 2 минуты на этом сайте TavRox jQuery 4 17.01.2011 15:00
Переопределение событий lispik jQuery 4 13.01.2011 12:30
Скопировать обработчики событий с одного элемента на другой. Jurasmi Events/DOM/Window 3 10.11.2010 19:03