Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Останавливаем обработку события (https://javascript.ru/forum/jquery/30518-ostanavlivaem-obrabotku-sobytiya.html)

OlegDegtev 07.08.2012 09:11

Останавливаем обработку события
 
Всем привет! Возникла необходимость создать горизонтальную ленту фотографий, которая длиннее чем экран. СМысл в том что часть ленты показывается, снизу выводится полоса прокрутки, с помощью которой можно прокрутить всю ленту. Так как стандартная полоса прокрутки практически не имеет настроек, то было решено писать свою. В общем виде она представляет собой фиксированный див(С моим фоном), в который вложен другой див(собственно сама полоса прокрутки), ездящий за курсором мыши. Столкнулся со следующей проблемой. Нажимаю левую кнопку мыши, запускается отслеживание мыши, див прекрасно бегает за мышью, галерея крутится, все ништяк, НО! Отпускаю кнопку мыши, див все равно продолжает бегать за мышкой. Нужно его как-то остановить. Может кто сталкивался с подобным?
$(document).ready(function(){
	var n = $(".top_tour").length; //Считаем количество блоков с фотками
	var lenta_width = 176 * n + (n - 1) * 5; //Считаем длину блока с фотками(учитываем расстояние между блоками в 5 px)
	var prop = 900 / lenta_width;   //Считаем отношение видимой длины ленты ко всей длине ленты(Для рассчета длины полосы прокрутки. Больше фоток - короче полоса)
	var scroll_width = 850 * prop; //Собственно высчитываем длину полосы прокрутки
	var max_margin = 850 - scroll_width; //Высчитываем максимальную длину, на которую может отступить слайдер(Чтоб не вылазил за пределы родителя справа)
	var k = lenta_width / 850; //Коэффициент скорости прокрутки. Чтоб конец прокрутки точно соответствовал концу ленты с фотками.
	$("#slider").css({"width":scroll_width + "px"}).mousedown(function(position){   //ПРинажатии мышки на слайдере делаем:
		var start = position.pageX; //Запоминаем положение мыши
		var slider_pos = $(this).css("left"); //Запоминаем положение слайдера
		slider_pos = slider_pos.substr(0, slider_pos.length - 2); //Отсекаем "px" из позиции слайдера
		$("body").mousemove(function(event){ //При движении мыши происходит:
			var move = event.pageX - start; //Считаем насколько сдвинулась мышь относительно стартового положения
			
				$("#slider").css({"left":slider_pos + move + "px"});  //Сдвигаем слайдер на такое-же расстояние
				$(".top_tour:first").css({"margin-left":"-" + move * k + "px"});  //Сдвигаем в обратную сторону галлерею с учетом коэффициента ее длины	
		});			
	});
$("body").mouseup(function(e){  // ПРи отпускании кнопки мыши пытаемся остановить выполнение события, нифига не работает(((
	e.stopPropagation();								
});

vadim5june 07.08.2012 10:39

можно так делать
объявляем var pr=0;
далее
...onmousedown=function(){pr=1;...
..onmousemove=function(){if(pr!=1)return;...
..onmouseup=function(e){pr=0;..

OlegDegtev 07.08.2012 12:51

Спасибо большое, помогло!!!! ПРавда повылазила большая куча недочётов в скрипте еще)

OlegDegtev 07.08.2012 14:06

Вобщем если кому интересно, выкладываю финальную версию скрипта. 2 дня с ним мучался. Он не претендует на отсутствие ошибок,так как я начинающий в jquery, но в интернете ничего другого все равно нету. Окошко ленты шириной 900px позишн релатив оверфлоу хидден. Внутри окошка - сама лента произвольной длины, позишн абсолют, фотки шириной 174, расстояние между фотками 5. ПОдкладка под слайдер(область где он может ездить) 850px. У нее тоже позишн релатив, у слайдера абсолют. Есть подкладка("#cover"), закрывающая собой весь документ, чтоб вы таская нажатой кнопкой мыши слайдер не выделяли текст и всякие элементы рядом со слайдером.
$(document).ready(function(){
	var lenta_width = $("#lenta").width();
	var slider_width = parseInt(850 * 900 / lenta_width);
	var max_left = 850 - slider_width;
	var max_lenta_left = lenta_width - 900;
	var k = lenta_width / 850;
	var pr = 0;
	$("#slider").css({"width":slider_width + "px"}).mousedown(function(position){		
		pr = 1;
		var height = $(document).height();
		$("#cover").css({"height":height+"px", "display":"block"});
		var start = position.pageX; 
		var slider_start = $(this).css("left");
		var lenta_start = $("#lenta").css("left");
		slider_start = parseInt(slider_start);
		lenta_start = parseInt(lenta_start);		
		$("body").mousemove(function(event){
			if (pr != 1)
				{return;}
			var move = event.pageX - start;
			var left = slider_start + move;
			var lenta_left = lenta_start - move * k;
			if (left < 0)
			{
				left = 0;
				lenta_left = 0;
			}
			if (left > max_left)
			{
				left = max_left;
				lenta_left = 0 - max_lenta_left;
			}
				$("#slider").css({"left":left + "px"});
				$("#lenta").css({"left":lenta_left +"px"});					
		});			
	});
	$("body").mouseup(function(){
		pr = 0;
		$("#cover").css({"display":"none"});								
	});
	
});

Надеюсь кому-нибудь мой метод поможет)


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