Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Остановить распространение событий (https://javascript.ru/forum/events/35676-ostanovit-rasprostranenie-sobytijj.html)

NeVirus 18.02.2013 13:58

Остановить распространение событий
 
Накидал такой вот код:
$('#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'" (убивая нужные мне эллементы) ... как этого избежать?
Закоментированный код был найден на просторах интернета и не работает... хотя почти все советы найденные в гугле точно такие же...

кто нибудь может сказать в чем моя ошибка?

ksa 18.02.2013 14:05

Цитата:

Сообщение от NeVirus
кто нибудь может сказать в чем моя ошибка?

Вот почитай статейку...
http://javascript.ru/tutorial/events...ovka-vsplytiya

Deff 18.02.2013 14:07

NeVirus,
Приведите минимальный HTML, точно обозначьте задачу

Deff 18.02.2013 14:31

<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>

NeVirus 18.02.2013 14:36

Цитата:

Сообщение от Deff (Сообщение 235278)
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" вот я и хочу знать как его остановить, т.к. оно мне не нужно

ksa 18.02.2013 14:42

Цитата:

Сообщение от NeVirus
я и хочу знать как его остановить

Это описано в статейке, ссылку я дал выше...

рони 18.02.2013 15:08

NeVirus,
$('.sort_manuf_p').live('click', function(event1) {
event1.preventDefault();
далее ваш код .
так пробовали?

danik.js 18.02.2013 17:14

Народ, ответ был дан во втором комментарии, че вы тут херню всякую постите? Отмечу только что для jQuery все сводится просто к вызову w3c-метода, ибо event - это кроссбраузерная обертка jquery'иевская.

NeVirus 19.02.2013 07:00

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

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

danik.js 19.02.2013 08:33

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

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


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