Javascript-форум - закрытие при клике в body

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - закрытие при клике в body (https://javascript.ru/forum/dom-window/45553-zakrytie-pri-klike-v-body.html)

$(document).ready(function(){
	showBasketLine();
	showBasketSmall();
	$(".storeBuy a").click(showBasketLine);
});
$("html").click(function() {
	if($(".basketSmallBox").is(":visible")){
		$(".basketSmallBox").removeClass("shower").hide();
	}
});
function showSmallBasket(event) {
	$(".basketLine a").click(function (event) {
		if($(".basketSmallBox").is(":visible")){
			$(".basketSmallBox").removeClass("shower").hide();
		} else if ($(".basketSmallBox").is(":hidden")) {
			showBasketSmall();
			$(".basketSmallBox").addClass("shower").show();
			event.stopPropagation();
		}
	});
}
function showBasketLine() {
	$.ajax({
		url: "/bitrix/templates/imperia.Pallet/include_areas/ajax.handler.php",
		type: "GET",
		cache: true,
		timeout: 1000,
		data: "block=basketLine",
		dataType: "html",
		success: function(data){
			$('.basketLineBox').html(data)
		}
	});
}
function showBasketSmall() {
	$.ajax({
		url: "/bitrix/templates/imperia.Pallet/include_areas/ajax.handler.php",
		type: "GET",
		cache: true,
		timeout: 1000,
		data: "block=basketSmall",
		dataType: "html",
		success: function(data){
			$('.basketSmallBox').html(data)
		}
	});
}

Вот так работает, только есть два минуса.
Первый, на ссылку нужно нажать два раза чтобы был отклик.
Второй, Если нажать внутри малой корзины, она скрывается

$(document).ready(function(){
	showBasketLine();
	showBasketSmall();
	$(".storeBuy a").click(showBasketLine);
	$("html").click(function() {
		if($(".basketSmallBox").is(":visible")){
			$(".basketSmallBox").removeClass("shower").hide();
		}
	});
});
function showSmallBasket() {
	$(this).click(function (event) {
		if($(".basketSmallBox").is(":visible")){
			$(".basketSmallBox").removeClass("shower").hide();
		} else if ($(".basketSmallBox").is(":hidden")) {
			showBasketSmall();
			$(".basketSmallBox").addClass("shower").show();
			event.stopPropagation();
		}
	});
}
function showBasketLine() {
	$.ajax({
		url: "/bitrix/templates/imperia.Pallet/include_areas/ajax.handler.php",
		type: "GET",
		cache: true,
		timeout: 1000,
		data: "block=basketLine",
		dataType: "html",
		success: function(data){
			$('.basketLineBox').html(data)
		}
	});
}
function showBasketSmall() {
	$.ajax({
		url: "/bitrix/templates/imperia.Pallet/include_areas/ajax.handler.php",
		type: "GET",
		cache: true,
		timeout: 1000,
		data: "block=basketSmall",
		dataType: "html",
		success: function(data){
			$('.basketSmallBox').html(data)
		}
	});
}

Вот так работает открытие и закрытие по щелчку на ссылке, а вот при щелчке на body или html ничего не происходит.

Все через ж.

1. Сервер сам нарисует кол-во и сум-му заказов в процессе выдачи хтмл. Более того, там на сервере эти показания полезно закешировать скажем в профиле юзера который естественно кешируется в сессии. Вплоть до события обновления корзины. Следовательно не нужен вызов рендера заказов по событию загрузки страницы.

2. Щелчок по боди тупо скрывает контейнер независимо от его состояния. Ничего проверять не надо, потому что щелчок от ссылки-открывашки не должен распространиться до туловища, и такой же щелчок по контейнеру корзины - не должен. Только эти 2 щелчка что-то проверяют и о чем-то размышляют.

Это значит на ссылку вешается запрет пропаганды и на контейнер корзины вешается запрет пропаганды щелчка. Один раз и навсегда. По которому контейнер опять же тупо сам себя убирает, потому что проверять нечего - невидимый контейнер не щелкабелен. Переключатель только в ссылке. Если видим - скрыть, если скрыт - увидеть.

И вообще, на кой такой гемор. Открыли - закрыли по тому же месту. При чем тут туловище...

Я скажем так javascript не особо знаю, у меня это получилось благодаря гуглу и экспериментов, особой осмысленности в этом нет, и толком не знаю как реализовать все что Вы пишите((

Как-то не вяжется. Кто в js не понимает тот пытается разобраться с js, а не с опупевшим jquery.

В общем из рабочего. Простейший вьюер. див на всю ширину, поверх него две "кнопки", то есть два дива по 30% шириной слева и справа, абсолютно позиционированы. Щелчок на этих кнопках вызывает соответственно следующую или предыдущую картинку, а щелчок посередине - по div под ними - закрывает плеер.

Как сделать чтобы щелчок на кнопках не проникал в контейнер для картинок?

prev_button.addEventListener("click", 
	function(event) {
		event.stopPropagation ? event.stopPropagation() : event.cancelBubble = !0;
	this.elem_anchor.click();
}, false);

Кнопки невидимые, без заливки, без обводки, без ничего. Только указатель мыши меняется в зависимости от расположения над: левой кнопкой - палец влево, правой - вправо, посередине - zoom-out.

Див-контейнер сам себя скрывает элементарно

overlay.addEventListener("click", 
	function(event) {
		this.style.visibility = "hidden";
}, false);

Ему не надо проверять видим я или невидим, потому что по невидимому щелкнуть не выйдет.

Появляется он после щелчка по ссылке на странице, куче которых вешается обработчик события щелчок по факту загрузки документа

...
elem.addEventListener("click", load_image, false);

вот она

var load_image = function(e) {

		if (e.preventDefault)
			e.preventDefault(); 
		e.returnValue = false;
		
// тут вырезано действующее вещество
		
		var arr = page_scrolls();
		overlay.style.visibility = "visible";
		overlay.style.top = arr[1] + "px";
//...
	};

Все то же самое у вас, с той лишь разницей что вместо оверлея - боди, и ссылка всего одна.

Не могу понять как мне все это цельным кодом написать

Подумал, подумал, вот что вышло, не знаю работает ли, но что то тут не так.

var showSmallBasket = function () {
	$(this).addEventListener("click", 
		function(event) {
			event.stopPropagation ? event.stopPropagation() : event.cancelBubble = !0;
		this.elem_anchor.click();
	}, false);
}
body.addEventListener("click", 
	function(event) {
		this.style.visibility = "hidden";
}, false);
document.onclick = function(e) {
	//не могу придумать
}

<!DOCTYPE html>

<html>
<head>
	<title>Корзина</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
	<script type="text/javascript">
		var showSmallBasket = function () {
			$(this).addEventListener("click", 
				function(event) {
					event.stopPropagation ? event.stopPropagation() : event.cancelBubble = !0;
				this.elem_anchor.click();
			}, false);
		}
		body.addEventListener("click", 
			function(event) {
				this.style.visibility = "hidden";
		}, false);
		document.onclick = function(e) {
			
		}
	</script>
</head>

<body>
<div class="basketLineBox">
	<div class="basketLine">
		<a href="#" onclick="showSmallBasket(); return false;">В корзине <b>2</b> товара</a>
	</div>
</div>
<div class="basketSmallBox">
	<div class="basketSmall">
		<h3>Позиции в Вашей корзине:</h3>
		<div class="basketSmallConteiner">
			<div class="smallName"><a href="#" title="Товар №2"><h3>Товар №2</h3></a></div>
			<div class="smallPrice">Цена:&nbsp;1 руб.</div>
			<div class="smallQuantity">Количество:&nbsp;3.00</div>
		</div>
		<div class="basketSmallConteiner">
			<div class="smallName"><a href="#" title="Товар №2"><h3>Товар №2</h3></a></div>
			<div class="smallPrice">Цена:&nbsp;1 руб.</div>
			<div class="smallQuantity">Количество:&nbsp;3.00</div>
		</div>
		<div class="buttonWaySmallBasket">
			<form method="get" action="/p/cart">
				<input type="submit" value="Изменить количество">
			</form>
		</div>
		<div class="buttonWaySmallBasket">
			<form method="get" action="/p/order">
				<input type="submit" value="Оформить заказ">
			</form>
		</div>
	</div>
</div>
</body>
</html>

Дальше этого не ушел((
Работает только клик по ссылке, разворачивает и скрывает, а клик по body не работает.

var showSmallBasket = function () {
	$(this).click(function (event) {
		if($(".basketSmallBox").is(":visible")){
			$(".basketSmallBox").removeClass("shower").hide();
		} else if ($(".basketSmallBox").is(":hidden")) {
			$(".basketSmallBox").addClass("shower").show();
		}
		event.stopPropagation ? event.stopPropagation() : event.cancelBubble = !0;
	});
}
$("html").click(function() {
	if($(".shower"))
	$(".basketSmallBox").removeClass("shower").hide();
});

А вот та все работает, но есть один минус, при клике на body все скрывается, но при повторном клике на body все открывается.

var showSmallBasket = function () {
	$(this).click(function (event) {
		if($(".basketSmallBox").is(":visible")){
			$(".basketSmallBox").removeClass("shower").hide();
		} else if ($(".basketSmallBox").is(":hidden")) {
			$(".basketSmallBox").addClass("shower").show();
		}
		event.stopPropagation ? event.stopPropagation() : event.cancelBubble = !0;
		$(body).click(function() {
			if($(".shower")) {
				$(".basketSmallBox").removeClass("shower").hide();
			}
		});
	});
}