ReSQL.ru
     
powered by simpleCommunicator - 2.0.59     © 2025 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Клик вне элемента - не могу заставить работать ожидаемым образом :(
25 сообщений из 30, страница 1 из 2
  1  все
Клик вне элемента - не могу заставить работать ожидаемым образом :(
    #39356266
Фотография neznajka
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
neznajka
Участник
Я тут попытался применить взятые из Интернета способы скрывания блоков при клике вне каждого из них.
Почему-то не получается: ни с обоими тестовыми блоками, ни даже с каждым из них отдельно.
Проблему я выделил в 3 файла (html+css+js), а сами применённые мной варианты - закомментированы в конце js-файла.
Если раскомментировать хоть один из них - то мои блоки даже не вызываются на экран :(
Единственное, что мне удалось установить - операция скрывания блоков происходит почему-то ВСЕГДА сразу же
после их появления на экране, не взирая на все ограничивающие условия.
А мне нужно, чтобы каждый из блоков скрывался при клике вне его (по принципу выпадающего списка).
Посмотрите, пожалуйста, что я делаю неправильно. Прилагаю тестовые файлы
(поскольку код, даже самый необходимый для вопроса, занял бы тут на странице слишком много места).
...
Рейтинг: 0 / 0
28.11.2016, 18:29
| Ответить | Цитировать | Написать  
Клик вне элемента - не могу заставить работать ожидаемым образом :(
    #39356385
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
neznajka, создайте тестовый пример на plnkr.co , codepen.io или jsfiddle.net .
...
Рейтинг: 0 / 0
28.11.2016, 21:42
| Ответить | Цитировать | Написать  
Клик вне элемента - не могу заставить работать ожидаемым образом :(
    #39356424
Фотография neznajka
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
neznajka
Участник
skyANA,
Да я бы и рад был так сделать, но как туда приобщить графические файлы, задействованные в css-оформлении и img-теге? А без них - картина страницы получается вообще не понятная, я локально проверял - строки и столбцы таблицы теряют свои нормальные габариты, и тогда вообще не понятно, КУДА именно надо кликать для раскрытия упомянутых мной блоков :(
Можно, конечно, тут html-css-js-коды представить под спойлерами - но те же необходимые графические элементы всё равно приобщать к посту придётся...
А так - достаточно лишь извлечь файлы из приложенного мной архива и открыть в браузере html-ник. Если у Вас найдётся время - гляньте, пожалуйста. Может Вы сразу же сможете увидеть какую-нибудь очевидную несуразность в моём коде? Мне б хотя бы понять, в чём затык - я бы хоть уразумел, в каком направлении рыть дальше
...
Рейтинг: 0 / 0
28.11.2016, 23:39
| Ответить | Цитировать | Написать  
Клик вне элемента - не могу заставить работать ожидаемым образом :(
    #39356432
Фотография neznajka
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
neznajka
Участник
Добавлю ещё, что в моем проблемном тесте почему-то реакция на клик вне блока происходит даже в том случае, когда он ещё невидим на странице, хотя в условии клика я чётко указал - срабатывать лишь при уже выведенном на экран (раскрытом) блоке... Это уже не первый случай, когда события в JS-коде не соблюдают предполагаемую мной хронологию - видимо, в моих предположениях есть какое-то фундаментальное непонимание. Именно его я и хочу уловить. Проще говоря - хочу уяснить для себя, почему в JS - иногда случается так, что написанная мной функция срабатывает уже на этапе её объявления (декларации), не дожидаясь этапа её вызова.
...
Рейтинг: 0 / 0
28.11.2016, 23:54
| Ответить | Цитировать | Написать  
Клик вне элемента - не могу заставить работать ожидаемым образом :(
    #39356668
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
user89
Участник
neznajka,

я скрывал через onblur
 
Самодельный Combobox
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
<!DOCTYPE html>
<head>
<title>Самодельный Combobox</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<style>
* {margin:0; padding:0;}
.Combobox {
  background:#fff;
  font:8pt Verdana,Arial,'MS Sans Serif','sans-serif';
}
.Combobox .DivForInput {
  margin:0;
  padding:0 0 0 4px;
  height:19px;
  overflow:hidden;
  border:1px solid #B5B8C8;
}
.Combobox .DivForInput input {
  font:8pt Verdana,Arial,'MS Sans Serif','sans-serif';
  margin:0; padding:0; border:0;
  outline:none;
  height:19px;
  line-height:18px;
  float:left;
}
.cmdList {
  background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAUCAIAAAAP9fodAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAOJJREFUOE+9kEEKgmAQhes4LSJcBh0hqluVxwk6QttKCoNUcFtp4kJFd73XkPymLYagh8w/vnnfP2h/vdlOxoOeVsAeevV+xWKNuC3Si9jdkKyM4rj25NV0MGpg+DVlWVZVhYoe47Yj1xG7vYSXoiishT2cLkezFcgkSVDRw4GPKTISJnZ9C99Y55DGWmHkFkzrJLGLoTAM8zyXtDzo4cA3Y8TOTQVBkGVZvQc9HDPiui4xHB/yfZLW3EZF3w4QO3XJ87w0TVE7p8SOX4QlnRPHcYjh0IrYQS9ie72I7fT6L/YELEZQH9hMDiwAAAAASUVORK5CYII=') no-repeat 0 0;
  width:18px;
  height:20px;
  cursor:pointer;
  float:right;
}
.Combobox .ComboCont {position:absolute;  margin-top:-9999px;}
.Combobox .ComboFocused {
  display:block;
  position:absolute;
  margin-top:-1px;
  z-index:2;
  background:#fff;
  border:1px solid #B5B8C8;
  outline:none;
}
.Combobox .ComboFocused div {padding:4px 4px;}
.Combobox .ComboFocused div:hover {background:#ECF3FC;}
</style>
</head>

<body>
<button style="margin:20px;" onclick="run();">Сделать выпадающие списки</button>

<table><tr>
  <td style="width:20px;"></td>
  <td> <div class="Combobox">Исполнение,Поддержка,Управление карьерой подчинённых,Участие в наборе персонала</div> </td>
  <td style="width:50px;"></td>
  <td> <div class="Combobox" id="cbo1">a > b,a < b,a & b</div> </td>
</tr></table>

<script>
function InitCombobox() {
  var d = document.getElementsByClassName('Combobox');
  for (i=0; i < d.length; i++) {
    var s = '<div class="DivForInput"> <input type="text"> <div class="cmdList" onclick="ShowComboBox(this);"></div> </div>' +
    '<div class="ComboCont" onblur="this.className=\'ComboCont\';">';
    var arr = d[i].innerHTML.split(',');
    for (j=0; j < arr.length; j++) {s = s + '<div onclick="SetComboText(this);">' + arr[j] + '</div>';}
    s = s + '</div>';
    d[i].innerHTML = s;
    d[i].children[0].style.width = d[i].offsetWidth - 4 + 'px';    
    d[i].children[0].children[0].style.width = d[i].offsetWidth - 25 + 'px';
    d[i].children[1].style.minWidth = d[i].offsetWidth -2 + 'px';
  }
}
function SetComboText(el) {
  el.parentNode.parentNode.children[0].children[0].value = el.innerHTML.replace(/&amp;/gi,'&').replace(/&gt;/,'>').replace(/&lt;/,'<');
  el.parentNode.className = 'ComboCont';
}

function ShowComboBox(el) {
  el = el.parentNode.parentNode.children[1];
  el.className = 'ComboFocused';
  el.tabIndex = '-1';  el.focus();
}
function SetItemIndex(el,idx) {el.children[1].children[idx].click();}


function run() {
  InitCombobox();
  SetItemIndex(document.getElementById('cbo1'),2); // Установим 3-й элемент списка (нумерация с нуля)"
}
</script>
</body>
</html>

 
Самодельный CheckCombobox
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
137.
138.
139.
140.
141.
142.
143.
144.
145.
146.
147.
148.
149.
150.
151.
152.
153.
154.
155.
156.
157.
158.
159.
160.
161.
162.
163.
164.
165.
166.
167.
168.
169.
170.
171.
172.
173.
174.
175.
176.
177.
178.
179.
180.
181.
182.
183.
184.
185.
186.
187.
188.
189.
190.
191.
192.
193.
194.
195.
196.
197.
198.
199.
200.
201.
202.
203.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CheckCombobox</title>
<style>
.CheckCombobox, .CheckCombobox div, .CheckCombobox input {
	background-color:#fff;
	font:11px Verdana,Arial,'MS Sans Serif','sans-serif';
	margin:0; padding:0;
	box-sizing:border-box;
	position:absolute;
}
.CheckCombobox {
	width:210px; height:22px;
	border:1px solid #B5B8C8;
	position:relative;
}
.CheckCombobox .divJoinString {
	border:0;
	top:0; left:2px; bottom:2px;
	line-height:19px;
	overflow:hidden;
}
.CheckCombobox .cmdExpandList {
	background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAUCAIAAAAP9fodAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAOJJREFUOE+9kEEKgmAQhes4LSJcBh0hqluVxwk6QttKCoNUcFtp4kJFd73XkPymLYagh8w/vnnfP2h/vdlOxoOeVsAeevV+xWKNuC3Si9jdkKyM4rj25NV0MGpg+DVlWVZVhYoe47Yj1xG7vYSXoiishT2cLkezFcgkSVDRw4GPKTISJnZ9C99Y55DGWmHkFkzrJLGLoTAM8zyXtDzo4cA3Y8TOTQVBkGVZvQc9HDPiui4xHB/yfZLW3EZF3w4QO3XJ87w0TVE7p8SOX4QlnRPHcYjh0IrYQS9ie72I7fT6L/YELEZQH9hMDiwAAAAASUVORK5CYII=') no-repeat 0 0;
	width:18px; height:20px;
	cursor:pointer;
	top:0; right:0;
}
.CheckCombobox .ChkBoxFocused {
	display:block;
	left:-1px;
	z-index:2;
	border:1px solid #B5B8C8;
	outline:none;
}
.CheckCombobox .search {
	display:block;
	font-style:italic;
	width:100%; height:19px; padding:2px;
	border:0; outline:none;
	border-bottom:1px solid #eee;
}
.CheckCombobox .CheckTable {
	border-collapse:collapse;
	position:absolute;
}
.CheckCombobox td {
	padding:5px !important;
	white-space:nowrap;
}
.CheckCombobox input {display:none;}
.CheckCombobox input + span {
	padding-left:16px;
	background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAIAAAD9iXMrAAAACXBIWXMAAAsSAAALEgHS3X78AAAAYklEQVQoz43RsQ2AQAwDQMfOGmzANBT0jEJLyUKsRsFDvsHgLtLFUpQYphU/kgCObb4GtkhKSZkpidS47Hw23hBJAPxEpJrzqPo86p1D5TzqnUMRt/MoIqrPo7rDIwDx878ncvgH6gjXVecAAAAASUVORK5CYII=') no-repeat;
}
.CheckCombobox input:checked + span {
	background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAIAAAD9iXMrAAAACXBIWXMAAAsSAAALEgHS3X78AAAAnElEQVQoz43ROwoCMRAG4P/hNbyAnQiCWHgFEQsLwbN4gz2KjY29pYgIeh2LCUl0d2WnCCT5MpNMON4cMSBGAK7NPiakImxLjlHS5NAon+hDkgDoD5qeZrGWXB8CECmTC7S8rH5QbJEszjaA+XlRo/fuRbLkixyx10ZkqWvb9/Utv71GpW5uwXP7aKP6fqlPkjvR13tDdyIAHPi/H8GqHHTeOs1YAAAAAElFTkSuQmCC') no-repeat;
}
.noDisplay {left:-999999px;} /* Есть глюк в Мозилле, почему-то display:none срабатывает при щелчке в любой input, поэтому делаем большой отрицательный отступ */

#t1 td{padding:7px 2px;}
</style>
</head>
<body>
<table id="t1">
	<tr>
		<td>Широкий список, вертикальная прокрутка</td>
		<td> <div class="CheckCombobox" id="chkBox1">Строка 1&#2;Строка 2&#2;Длинное название, состоящее из многих слов&#2;Управление карьерой подчинённых&#2;Участие в наборе персонала&#2;Некий пункт 1&#2;Некий пункт 2&#2;Некий пункт 3&#2;Некий пункт 4&#2;Некий пункт 5</div> </td>
	<tr>
		<td> <button onclick="SelectItemsChk(gid('chkBox2'),'Пункт 4Пункт 1', '');">Выделить часть пунктов программно</button> </td>
		<td> <div class="CheckCombobox" id="chkBox2">Пункт 1&#2;Пункт 2&#2;Пункт 3&#2;Пункт 4</div> </td>
	</tr>
	<tr>
		<td> <button onclick="SelectAllChk(gid('chkBox3'));">Выделить все пункты программно</button> </td>
		<td> <div class="CheckCombobox" id="chkBox3">1&#2;2&#2;3</div> </td>
	</tr>
</table>

<script>
function gid(idx) {return document.getElementById(idx);}
function CEL(s) {return document.createElement(s);}
function ACH(p,c) {p.appendChild(c);}

function getScrollWidth() {
	var dv = CEL('div');
	dv.style.overflowY = 'scroll'; dv.style.width = '50px'; dv.style.height = '50px'; dv.style.position = 'absolute';
	dv.style.visibility = 'hidden';//при display:none размеры нельзя узнать. visibility:hidden - сохраняет геометрию, а выше было position=absolute - не сломает разметку
	ACH(document.body,dv);
	var sw = dv.offsetWidth - dv.clientWidth;
	document.body.removeChild(dv);
	return (sw);
}
var ScrollWidth = getScrollWidth();


function InitCheckCombobox(separator) {
	var d = document.getElementsByClassName('CheckCombobox');
	for (var i=0; i < d.length; i++) {
		var cmdExpandList = CEL('div'), divJoinString = CEL('div'); search = CEL('input'); tbl = CEL('table'); chkBox = CEL('div');//тот самый выпадающий список
		var arr = d[i].innerHTML.split(separator);
		d[i].innerHTML = '';

		cmdExpandList.className = 'cmdExpandList';
		cmdExpandList.onclick = ShowChkBox;
		ACH(d[i],cmdExpandList);

		divJoinString.className = 'divJoinString'; divJoinString.style.right = cmdExpandList.offsetWidth + 3 + 'px';
		ACH(d[i],divJoinString);

		search.className = 'search'; search.setAttribute('placeholder', 'Быстрый поиск по фрагменту...'); search.onkeyup = RunFilter;

		tbl.className = 'CheckTable';
		var NewCell = tbl.insertRow(-1).insertCell(-1);
		NewCell.innerHTML = '<label><input type="checkbox"><span>(Выделить всё)</span></label>';
		NewCell.children[0].children[0].onclick = SelectAll;
		for (var j=0; j<arr.length; j++) {
			NewCell = tbl.insertRow(-1).insertCell(-1);
			NewCell.innerHTML = '<label><input type="checkbox"><span>' + arr[j] + '</span></label>';
			NewCell.children[0].children[0].onclick = GetJoinStringChk;
		}
		chkBox.className = 'noDisplay';
		var st = chkBox.style;
		st.top = d[i].offsetHeight - 2 + 'px'; st.minWidth = d[i].offsetWidth + 'px';	st.maxHeight = '243px';
		st.overflowY = 'auto'; st.overflowX = 'hidden';

		ACH(chkBox,search);
		ACH(chkBox,tbl);
		ACH(d[i],chkBox);

		tbl.style.top = search.offsetHeight + 2 + 'px';
		st.height = search.offsetHeight + tbl.offsetHeight + 4 + 'px';
		st.width = tbl.offsetWidth + ScrollWidth + 'px';

		// Добавим события к выпадающему списку
		chkBox.addEventListener('focus', onChkBoxFocus, true);
		chkBox.addEventListener('blur', onChkBoxBlur, true);
	}//for (i=0; i < d.length; i++) закончили перебор всех DIV с классом CheckCombobox

	function ShowChkBox() {
		var el = this.parentNode.children[2];
		el.className = 'ChkBoxFocused';
		el.tabIndex = '-1';	el.focus();
		el.children[0].value = '';

		var rows = el.children[1].rows, len = rows.length;
		for (var i=1; i<len; i++) {rows[i].style.display = 'table-row';}
	}

	function onChkBoxFocus() {this.className = 'ChkBoxFocused';}
	function onChkBoxBlur() {this.className = 'noDisplay';}

	function RunFilter(event) {
		var text = this.value.toUpperCase();
		var rows = this.nextSibling.rows, len = rows.length, TD_txt = '';

		for (var i=1; i<len; i++) {
			TD_txt = rows[i].cells[0].innerHTML.toUpperCase();
			if (TD_txt.indexOf(text) != -1) {rows[i].style.display = 'table-row';}
			else {rows[i].style.display = 'none';}
		}
	}

	function SelectAll(event) {
		var rows = this.parentNode.parentNode.parentNode.parentNode.parentNode.rows;
		for (var j=1; j < rows.length; j++) {
			if (rows[j].style.display=='table-row') {rows[j].cells[0].children[0].children[0].checked = this.checked;}
		}
		GetJoinStringChk(event);
	}

	function GetJoinStringChk(event) {
		var chk = event.target, rows = chk.parentNode.parentNode.parentNode.parentNode.parentNode.rows, s = '';
		for (var j=1; j < rows.length; j++) {
			if (rows[j].cells[0].children[0].children[0].checked) {s = s + ',' + rows[j].cells[0].children[0].children[1].innerHTML};
		}
		chk.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.children[1].innerHTML = s.substring(1);
	}
} // InitCheckCombobox


function SelectAllChk(el) {
	el.children[0].click();
	el.children[2].children[1].rows[0].cells[0].children[0].children[0].click();
	el.children[2].blur();
}

function SelectItemsChk(el, str, separator) {
	var str = str.toUpperCase(), arr = str.split(separator), i=0, j=0;
	var rows = el.children[2].children[1].rows;
	for (i=0; i < arr.length; i++) {
		for (j=1; j < rows.length; j++) {
			if (rows[j].cells[0].children[0].children[1].innerHTML.toUpperCase() == arr[i]) {rows[j].cells[0].children[0].children[0].click()};
		}
	}
}


InitCheckCombobox('');
</script>
</body>
</html>

...
Рейтинг: 0 / 0
29.11.2016, 11:34
| Ответить | Цитировать | Написать  
Клик вне элемента - не могу заставить работать ожидаемым образом :(
    #39356726
Фотография neznajka
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
neznajka
Участник
Спасибо, user89!
Я тут, кажется, уже почти разобрался, почему у меня ни один из заимствованных мной из Интернета вариантов не работает. По всему выходит, что всё дело - во "всплытии" клика (есть, оказывается, такой интересный прибаб а х в JS:). Для всякого скрытого блока открывающий его элемент -то всегда является видимым и находится ВНЕ этого самого скрытого блока. Вот и выходит, что даже если явно задавать ограничение - "клику на скрытие блока срабатывать только в том случае, если блок уже открыт/видим" - то это ничего не даёт: ведь происходит такая последовательность:
- сначала при клике на видимом открывающем элементе срабатывает обработчик открытия (вывода на экран) скрытого блока и он становится видимым;
- затем этот же самый клик (произведённый заведомо ВНЕ только что открытого блока) всплывает до самого верхнего уровня (document), где вполне правомерно срабатывает уже обработчик его закрытия (ведь все условия для его срабатывания уже выполнены: блок уже открыт и клик был произведён именно ВНЕ его).
Выходит, что для корректного срабатывания - вполне достаточно прервать процесс всплытия клика. Подозреваю, что для этого нужно просто поставить "return false" в нужном месте. Вероятнее всего - сразу после открытия (вывода на экран) того самого скрытого блока.
Проверю на досуге.
Конечно, любому маститому JS-нику - это всё вполне очевидно. Но для меня, как для новичка, - это маленькое открытие :)
...
Рейтинг: 0 / 0
29.11.2016, 12:22
| Ответить | Цитировать | Написать  
Клик вне элемента - не могу заставить работать ожидаемым образом :(
    #39356759
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
user89
Участник
neznajkaВыходит, что для корректного срабатывания - вполне достаточно прервать процесс всплытия клика. Подозреваю, что для этого нужно просто поставить "return false" в нужном местеНа всякий случай посмотрите Прекращение всплытия и там же ниже по тексту, есть третий аргумент addEventListener
...
Рейтинг: 0 / 0
29.11.2016, 12:56
| Ответить | Цитировать | Написать  
Клик вне элемента - не могу заставить работать ожидаемым образом :(
    #39356775
Фотография neznajka
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
neznajka
Участник
user89, благодарю Вас - я когда-то уже наталкивался на такой материал, но тогда он мне был ещё не нужен. А сейчас вот с Вашей подачи снова вспомнил о нём - буду вникать по мере необходимости. Спасибо.
...
Рейтинг: 0 / 0
29.11.2016, 13:14
| Ответить | Цитировать | Написать  
Клик вне элемента - не могу заставить работать ожидаемым образом :(
    #39357207
Фотография neznajka
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
neznajka
Участник
Не, не получается всё равно - за целый день уже всё вышеперечисленное перепробовал:
всплытие всё равно проходит наверх, не замечая никаких команд-преград,
и упрямо скрывает блок сразу же после его открытия :(
Видимо, если на странице предусмотрено НЕСКОЛЬКО самописных select'ов (блоков),
то их таким образом не закрыть никак.
Буду закрывать через ESC - уж такой-то "ломик" сработает в любом случае.
...
Рейтинг: 0 / 0
29.11.2016, 18:30
| Ответить | Цитировать | Написать  
Клик вне элемента - не могу заставить работать ожидаемым образом :(
    #39357725
Фотография neznajka
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
neznajka
Участник
Всё-таки попробую ещё раз - может с помощью гуру всё получится :)
skyANA, по Вашему совету я создал тестовый пример , но в нём все 5 вариантов проблемной функции закрытия 2-х блоков (в самом конце js-файла) - сейчас закомментированы. Сделано это для того, чтобы можно было увидеть, как раскрываются (становятся видимыми) на странице упомянутые мной 2 блока. Если раскомментировать хоть один из тех вариантов - то раскрытие/визуализация блоков полностью блокируется :(
Т.е. - любой вариант скрытия блоков почему-то срабатывает сразу же после их раскрывания и потому их увидеть вообще невозможно. Потому и закомментировал пока - чтобы можно было хотя бы увидеть, о каких именно блоках я тут толкую.
Если у Вас найдётся минутка - гляньте пожалуйста, раскомментировав, например 5-й вариант в самом конце файла - именно он мне кажется самым "перспективным" для отладки. Мне почему-то кажется, что Вы эту проблему победите сразу же, "одной левой" :)
...
Рейтинг: 0 / 0
30.11.2016, 15:20
| Ответить | Цитировать | Написать  
Клик вне элемента - не могу заставить работать ожидаемым образом :(
    #39357776
mage.lan
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
mage.lan
Участник
neznajka,

обычно все это делают так
Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
function openPopup(e)
{
//показываем попап
}
function closePopup (e)
{
// скрываем поп-ап
    $('body').off('click', closePopup);
}

$('button').on(
    'click',
    function (e)
    {
        e.preventDefault();
        openPopup(e);
        setTimeout(
            function ()
            {
                 $('body').on('click', closePopup)
            }
        );
        return false;
    }
);


setTimeout в данном случае приводит все реализации "всплытия" событий к единообразию. Он откладывает выполнение привязки закрытия события на время, когда событие закончится.
...
Рейтинг: 0 / 0
30.11.2016, 16:12
| Ответить | Цитировать | Написать  
Клик вне элемента - не могу заставить работать ожидаемым образом :(
    #39357946
Фотография neznajka
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
neznajka
Участник
Спасибо за участие, mage.lan,
Логика Вашего объяснения мне понятна. Но применение на практике - вызывает затруднения, я пока ещё не настолько продвинутый в вопросах JS/JQ. Потому, к сожалению, применить предложенный Вами шаблон кода пока не получается: не могу привязать это всё к своим DIV'ам - ни к открывающим, ни к скрываемым :(
Посмотрите, пожалуйста, как я попытался применить предложенный Вами способ. Поправьте или подскажите, как надо правильно сделать, пожалуйста.
...
Рейтинг: 0 / 0
30.11.2016, 18:39
| Ответить | Цитировать | Написать  
Клик вне элемента - не могу заставить работать ожидаемым образом :(
    #39357950
Фотография neznajka
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
neznajka
Участник
mage.lan, добавлю, что предложенный Вами там в моём JS-файле шаблон начинается с 83-й строки
...
Рейтинг: 0 / 0
30.11.2016, 18:42
| Ответить | Цитировать | Написать  
Клик вне элемента - не могу заставить работать ожидаемым образом :(
    #39357983
mage.lan
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
mage.lan
Участник
neznajka,

Вы это хотите?
...
Рейтинг: 0 / 0
30.11.2016, 19:23
| Ответить | Цитировать | Написать  
Клик вне элемента - не могу заставить работать ожидаемым образом :(
    #39358374
Фотография neznajka
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
neznajka
Участник
Спасибо, mage.lan,
Не совсем то. Такое я уже сам смог бы сделать.
Простите, что не слишком понятно и путано объясняю - трудно сориентироваться в специфике JS-терминологии.
Говоря проще - мне нужно, чтобы каждый из скрытых блоков вёл себя как выпадающий список: КАЖДЫЙ из них (если уже раскрылся - стал видимым на экране) должен закрываться при щелчке на ЛЮБОМ элементе страницы ВНЕ этого самого блока. А при щелчке внутри блока - он закрываться не должен, т.к. для этого случая у меня уже есть своя процедура обработки.
Т.е. например, 2-й блок (если уже выведен на экран и видим) должен скрываться при левом клике ВНЕ этого 2-го блока, в том числе - и при клике на 1-м блоке или его "открывалке").
Аналогично должен себя вести и 1-й блок.
Но у меня пока не получается побороть хотя бы один из них. Вот я и провожу свои эксперименты пока только над 2-м :(
...
Рейтинг: 0 / 0
01.12.2016, 12:40
| Ответить | Цитировать | Написать  
Клик вне элемента - не могу заставить работать ожидаемым образом :(
    #39358410
mage.lan
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
mage.lan
Участник
neznajka,

Честно говоря задачка не очень интересная, деревьев написал в свое время много, считаю такие контролы античеловеческим злом.
Могу предложить вам следующие:

1. отдельно решить задачу дерева
2. отдельно решить задачу с попап
3. объеденить их (тут у вас начнутся проблемы с логикой поведения, но вы будете решать только их не отвлекаясь на решенные задач 1 и 2)
...
Рейтинг: 0 / 0
01.12.2016, 13:07
| Ответить | Цитировать | Написать  
Клик вне элемента - не могу заставить работать ожидаемым образом :(
    #39358429
Фотография neznajka
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
neznajka
Участник
mage.lan,
Дерево работает нормально (просто в тесте я убрал графическое оформление).
Насчёт поэтапного решения - я так и начал уже делать. Сейчас я уберу из 2-го блока дерево - для данного теста оно и вправду не нужно, Вы правы.
...
Рейтинг: 0 / 0
01.12.2016, 13:22
| Ответить | Цитировать | Написать  
Клик вне элемента - не могу заставить работать ожидаемым образом :(
    #39358460
Фотография neznajka
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
neznajka
Участник
mage.lan, посмотрите, пожалуйста, "очищенный вариант теста"
Предложенный вчера Вами шаблон кода начинается там в js-окне с 31-строки. На всё, что выше - не обращайте внимания: всё то лишь открывает 1-й блок в нужной позиции. Гляньте, пожалуйста с 31-строки - именно оттуда начинаются мои проблемы :(
...
Рейтинг: 0 / 0
01.12.2016, 13:44
| Ответить | Цитировать | Написать  
Клик вне элемента - не могу заставить работать ожидаемым образом :(
    #39358554
mage.lan
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
mage.lan
Участник
neznajka,

Все тоже самое

В 40й строке у вас ошибка (доверьте работать jQuery с DOM)
В HTML 7 строка - кривая версия jQuery
В HTML 43 строка - убран onclick ($('#ukz').on('click', ...) и так уже цепляется за эту кнопку)

Советую вам потратить день на изучение селекторов в jQuery и убрать в своем коде все id.
...
Рейтинг: 0 / 0
01.12.2016, 15:30
| Ответить | Цитировать | Написать  
Клик вне элемента - не могу заставить работать ожидаемым образом :(
    #39358811
Фотография neznajka
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
neznajka
Участник
mage.lan,
О, спасибо! - почти то, что надо.
Насчёт 40-й строки - Вы правы: торопился и пропустил style при копировании.
Насчёт версии JQ - вроде ж рабочую ссылку вставлял... Или там была указана локальная копия? Не помню уже, честно говоря.
Или Вы имеете в виду, что задействована не последняя версия JQ? Так мне так и надо. Ибо все последующие - очень тормозят уже применённые мной на странице эффекты. Даже простой эффект "лупа" - и то уходит в спячку, если применить свежую версию JQ. Вероятнее всего - надо тогда что-то в коде применённых мной эффектов адаптировать к свежей версии. Или искать обновлённую лупу. Но тогда - и все остальные... Долго это. Да и не совсем необходимо для данного случая. Потому и оставил старую версию. Если именно это имели в виду под выражением "кривая версия". А ссылка на неё - я только что проверил - работает.
Насчёт селекторов в jQuery - Вы тоже правы. Я ими в более простых случаях и пользуюсь. Но при таком количестве кода - мне легче ориентироваться именно по id-шникам. jQuery-селекторы я пока воспринимаю не так легко, приходится слишком долго вдумываться над каждым из них, о каком именно элементе идёт речь. Так что - для этой задачи пусть пока остаются id-шники.
Но следующий проект - буду делать, по возможности, исключительно с применением JQ.
А пока - попытался распространить Ваш код также и на закрытие 1-го блока, который открывается по клику на красной полоске. Не выходит. Я не пойму, куда именно надо вставлять переменную, представляющую этот блок.
Попробовал в функции closePopup поставить не одну, а рядом две команды:
Код: javascript
1.
2.
document.getElementById('skryty_blok2').style.display = 'none';
document.getElementById('skryty_blok1').style.display = 'none';


Но и это никак не повлияло на закрытие 1-го блока :(
Может, тут я должен как-то задействовать параметр e , применённый Вами в функциях openPopup(e) и closePopup(e) ?
Подскажите, ещё, пожалуйста.
...
Рейтинг: 0 / 0
01.12.2016, 18:20
| Ответить | Цитировать | Написать  
Клик вне элемента - не могу заставить работать ожидаемым образом :(
    #39358816
Фотография neznajka
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
neznajka
Участник
mage.lan,
Да, ещё хотел спросить - а с какой целью Вы в 40-й строке вставили вывод в консоль самого объекта JQ - console.info($) ? Чтобы проверить, что файл JQ подключен и работает? Или это нужно для чего-то другого?
...
Рейтинг: 0 / 0
01.12.2016, 18:26
| Ответить | Цитировать | Написать  
Клик вне элемента - не могу заставить работать ожидаемым образом :(
    #39358829
Фотография neznajka
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
neznajka
Участник
Ура, mage.lan, - у меня таки получилось победить и 1-й блок! Спасибо огромное Вам!
Я его "нагнул"-таки, задействовав в Вашем шаблоне его собственную функцию показа/раскрытия (ZvetVybor) - просто в самый конец файла добавил:
Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
function closePopup1 (el)	{// скрываем поп-ап
	document.getElementById('skryty_blok1').style.display = 'none';
	$('body').off('click', closePopup1);
}

$('#Ring1').on(
    'click',
    function (el)
    {
        el.preventDefault();
        ZvetVybor(el);
        setTimeout(
            function ()
            {
                 $('body').on('click', closePopup1)
            }
        );
        return false;
    }
);


Теперь осталось только добавить функции обработки перед закрытием - чтобы обработать выбранный в результате клика под-элемент скрытого блока.
...
Рейтинг: 0 / 0
01.12.2016, 18:41
| Ответить | Цитировать | Написать  
Клик вне элемента - не могу заставить работать ожидаемым образом :(
    #39358903
Фотография neznajka
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
neznajka
Участник
mage.lan,
Вот, я тут по Вашим рекомендациям привожу всё к JQ-виду:
Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
function open_blok2(e){
	var br=Math.round(100*document.getElementById('tdItog').getBoundingClientRect().width/document.getElementById('obertka_2').getBoundingClientRect().width);
	$('#skryty_blok2').css({"top":"100%","width":br+'%','display':'block'});
}
$('#ukz').on('click',function(e)
				{e.preventDefault();
				 open_blok2(e);
				 setTimeout(function(){$('body').on('click',close_blok2)});
				 return false;
				}
	     );


Конечно, если не на "экспорт" - то мне нравится. Компактненько, вроде, получается :)
Только не нашёл в Интернете, как подгоняются под JQ вот такие выражения:
Код: javascript
1.
document.getElementById('tdItog').getBoundingClientRect().width


Пробовал вот так $('tdItog').getBoundingClientRect().width - не проходит.
А как было бы правильно?
...
Рейтинг: 0 / 0
01.12.2016, 20:27
| Ответить | Цитировать | Написать  
Клик вне элемента - не могу заставить работать ожидаемым образом :(
    #39359165
mage.lan
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
mage.lan
Участник
neznajka,
Код: javascript
1.
2.
3.
var br=Math.round(100*document.getElementById('tdItog').getBoundingClientRect().width/document.getElementById('obertka_2').getBoundingClientRect().width);
	$('#skryty_blok2').css({"top":"100%","width":br+'%','display':'block'});
}


как то так надо
Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
var br = Math.round(
    100 * $('#tdItog').width() / $('#obertka_2').width()
);
$('#skryty_blok2').css(
   {
        top:"100%",
        width: br + '%'
    }
).show();



если вы хотите работать с элементами методами DOM, можно писать так
Код: javascript
1.
2.
//document.getElementById('tdItog').getBoundingClientRect().width
$('tdItog').get(0).getBoundingClientRect().width


но это плохая практика. В jQuery есть все методы, которые могут потребоваться для манипуляциями с DOM и они более менее кросбраузерные.
...
Рейтинг: 0 / 0
02.12.2016, 11:09
| Ответить | Цитировать | Написать  
Клик вне элемента - не могу заставить работать ожидаемым образом :(
    #39359167
mage.lan
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
mage.lan
Участник
Код: javascript
1.
$('#tdItog').get(0).getBoundingClientRect().width
...
Рейтинг: 0 / 0
02.12.2016, 11:10
| Ответить | Цитировать | Написать  
25 сообщений из 30, страница 1 из 2
  1  все
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Клик вне элемента - не могу заставить работать ожидаемым образом :(
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]