Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / click() without focus / 25 сообщений из 28, страница 1 из 2
  1  все
11.11.2013, 19:20
    #38460972
Zoria
Zoria
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
click() without focus
Как можно вызвать click() для label, чтобы фокус не уходил с текущего элемента и страница не скролилась вниз?

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
<!DOCTYPE html >
<html>
<head>
</head>
<body>
    <a onclick="unselect()">delete</a>
    <div style="height: 1000px">
    </div>
    <label for="input1" id="labelSelect">
        <input id="input1" type="checkbox" checked />
    </label>
    <script>
        function unselect() {
            document.getElementById("labelSelect").click();
        }
    </script>
</body>
</html>
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
12.11.2013, 12:32
    #38461646
Zoria
Zoria
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
click() without focus
не густо... :)
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
12.11.2013, 12:52
    #38461681
Яростный Меч
Яростный Меч
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
click() without focus
Zoria,

а чего в итоге ты хочешь добиться?
просто поменять checked в чекбоксе? так это можно напрямую сделать
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
12.11.2013, 13:20
    #38461728
Zoria
Zoria
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
click() without focus
Яростный МечZoria,

а чего в итоге ты хочешь добиться?
просто поменять checked в чекбоксе? так это можно напрямую сделать
да в том-то все и дело, что не только - на лабельклик навешано целая сказка, она меняет классы, чекед у чекбокса, происходит валидация и так же удаляется кое-чего из яваскриптового аррая. это все и происходит, только при этом чекбокс становится активным элементом и длинная страница услужливо скролит туда..
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
12.11.2013, 15:09
    #38462013
skyANA
skyANA
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
click() without focus
ZoriaЯростный МечZoria,

а чего в итоге ты хочешь добиться?
просто поменять checked в чекбоксе? так это можно напрямую сделать
да в том-то все и дело, что не только - на лабельклик навешано целая сказка, она меняет классы, чекед у чекбокса, происходит валидация и так же удаляется кое-чего из яваскриптового аррая. это все и происходит, только при этом чекбокс становится активным элементом и длинная страница услужливо скролит туда..Да вроде всё нормуль:
Код: 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.
<!DOCTYPE html>
<html>  
<head></head>  
<body>
  <a onclick="unselect('input1')">delete</a>
  <div style="height: 1000px"></div>
  <label for="input1" id="label1" onclick="onLabelClick(this,event)">
    Label: <input id="input1" type="checkbox" checked />
  </label>
  <script>
    function onLabelClick(sender, event) {
      console.log('Label for "' + sender.getAttribute('for') + '" clicked.');
    }

    /**
     * @param elementID  String  Required. The ID attribute's value of the element you want to select
     */
    function select(elementID) {
      var element = document.getElementById(elementID);

      if (element) {
        element.checked = true;
      }
    }

    /**
     * @param elementID  String  Required. The ID attribute's value of the element you want to unselect
     */
    function unselect(elementID) {
      var element = document.getElementById(elementID);

      if (element) {
        element.checked = false;
      }
    }
  </script>
</body>
</html>
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
12.11.2013, 15:34
    #38462068
Zoria
Zoria
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
click() without focus
skyANAДа вроде всё нормуль
не поняла, что именно нормуль?
если просто менять свойство checked, то да, на элемент не ставится фокус.

но у меня это *(меняет свойство checked) делаетcя по лабельклик, на который навешано много разного кода. мне не достаточно просто сделать чекбокс чекнутым.., мне еще нужно выполнить все то что при этом выполняется по лабельклик.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
12.11.2013, 15:47
    #38462120
skyANA
skyANA
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
click() without focus
ZoriaskyANAДа вроде всё нормуль
не поняла, что именно нормуль?
если просто менять свойство checked, то да, на элемент не ставится фокус.

но у меня это *(меняет свойство checked) делаетcя по лабельклик, на который навешано много разного кода. мне не достаточно просто сделать чекбокс чекнутым.., мне еще нужно выполнить все то что при этом выполняется по лабельклик.Писать в обработчиках событий много разного кода - это плохая практика. Обработчики пухнут, понять, что в них делается, становится всё труднее.
Разнесите логику на отдельные методы и в onDeleteClick используйте то-то, а в onLabelClick сё-то.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
12.11.2013, 15:48
    #38462123
Zoria
Zoria
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
click() without focus
skyANAZoriaпропущено...

не поняла, что именно нормуль?
если просто менять свойство checked, то да, на элемент не ставится фокус.

но у меня это *(меняет свойство checked) делаетcя по лабельклик, на который навешано много разного кода. мне не достаточно просто сделать чекбокс чекнутым.., мне еще нужно выполнить все то что при этом выполняется по лабельклик.Писать в обработчиках событий много разного кода - это плохая практика. Обработчики пухнут, понять, что в них делается, становится всё труднее.
Разнесите логику на отдельные методы и в onDeleteClick используйте то-то, а в onLabelClick сё-то.
я не могу ее разнести :)
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
12.11.2013, 15:52
    #38462141
skyANA
skyANA
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
click() without focus
Zoria, так. Вам посоветовать красивый костыль? :)
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
12.11.2013, 15:54
    #38462152
Zoria
Zoria
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
click() without focus
skyANAZoria, так. Вам посоветовать красивый костыль? :)
ну если он еще и красивый.... то давайте его сюда :-)
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
12.11.2013, 16:14
    #38462205
st_st
st_st
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
click() without focus
Если у страницы есть прокрутка, то label можно спрятать, кликнуть и опять показать.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
12.11.2013, 16:18
    #38462214
Малыхин Сергей
Малыхин Сергей
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
click() without focus
ZoriaКак можно вызвать click() для label, чтобы фокус не уходил с текущего элемента и страница не скролилась вниз?

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
<!DOCTYPE html >
<html>
<head>
</head>
<body>
    <a onclick="unselect()">delete</a>
    <div style="height: 1000px">
    </div>
    <label for="input1" id="labelSelect">
        <input id="input1" type="checkbox" checked />
    </label>
    <script>
        function unselect() {
            document.getElementById("labelSelect").click();
        }
    </script>
</body>
</html>


Что бы страница не скролилась вниз нужно изменить обработчик который скролит ее вниз (это же очевидно)
Если обработчик изменить нельзя по каким либо причинам отскроль страницу назад
Запомнив scrollTop до вызова обработчика и вернув его после обработчика


Рабочего примера для разбора нет может быть много всяких нюансов
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
12.11.2013, 16:22
    #38462227
Zoria
Zoria
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
click() without focus
Малыхин СергейЗапомнив scrollTop до вызова обработчика и вернув его после обработчика
этот вариант был испробован как первый, не подходит потому что скроль скачет тогда сначала вниз потом назад.
Малыхин Сергей"Что бы страница не скролилась вниз нужно изменить обработчик который скролит ее вниз (это же очевидно)"
я привела конкретный рабочий пример, какой обработчик, который скролит ее вниз можно в нем изменить?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
12.11.2013, 16:41
    #38462265
st_st
st_st
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
click() without focus
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
    <script>
		$ = function(selector) {
			return document.querySelector(selector);
		}
        function unselect() {
			var el = $('#labelSelect input[type="checkbox"]');
			el.style.display = "none";
            $("#labelSelect").click();
			el.style.display = "inline";
        }
    </script>
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
12.11.2013, 17:13
    #38462372
Zoria
Zoria
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
click() without focus
st_st
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
<script>
		$ = function(selector) {
			return document.querySelector(selector);
		}
        function unselect() {
			var el = $('#labelSelect input[type="checkbox"]');
			el.style.display = "none";
            $("#labelSelect").click();
			el.style.display = "inline";
        }
</script>


спасибо, да, я видела ваше предложение, еще не успела проверить поэтому не отреагировала до сих пор.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
12.11.2013, 18:02
    #38462477
Zoria
Zoria
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
click() without focus
факир был пьян.. IE<=8 не меняет состояние чекбокса, если поставить ему display=none
<body>
<a onclick="unselect()">delete</a>
<div style="height: 800px">
</div>
<label for="input1" id="labelSelect">
<input id="input1" type="checkbox" checked />
</label>
<script>
function unselect() {
var el = document.getElementById("input1");
el.style.display = "none";
document.getElementById("labelSelect").click();
el.style.display = "inline";
}
</script>
</body>
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
12.11.2013, 18:06
    #38462485
skyANA
skyANA
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
click() without focus
ZoriaskyANAZoria, так. Вам посоветовать красивый костыль? :)
ну если он еще и красивый.... то давайте его сюда :-)Вот:
Код: 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.
<!DOCTYPE html>
<html>  
<head></head>  
<body>
  <a onclick="onDeleteClick(this,event)">delete</a>
  <div style="height: 1000px"></div>
  <label for="input1" id="label1" onclick="onLabelClick(this,event)" tabindex="-1">
    Label: <input id="input1" type="checkbox" tabindex="-1" checked />
  </label>
  <script>
    function onDeleteClick(sender, event) {      
      hide('input1');
      clickOn('label1');
      show('input1', 'inline-block');
    }
    
    function onLabelClick(sender, event) {
      var elementID = sender.getAttribute('for');
      
      console.log('Label for "' + elementID + '" clicked.');
    }

    /**
     * @param elementID  String  Required. The ID attribute's value of the element you want to click on
     */
    function clickOn(elementID) {
      var element = document.getElementById(elementID);

      if (element) {
        element.click();
      }
    }

    /**
     * @param elementID  String  Required. The ID attribute's value of the element you want to hide
     */
    function hide(elementID) {
      var element = document.getElementById(elementID);

      if (element) {
        element.style.display = 'none';
      }
    }

    /**
     * @param elementID  String  Required. The ID attribute's value of the element you want to show
     */
    function show(elementID, style) {
      var element = document.getElementById(elementID);

      if (element) {
        element.style.display = style;
      }
    }
  </script>
</body>
</html>
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
12.11.2013, 18:11
    #38462495
Zoria
Zoria
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
click() without focus
skyANA,


ZoriaIE<=8 не меняет состояние чекбокса, если поставить ему display=none
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
12.11.2013, 18:13
    #38462498
skyANA
skyANA
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
click() without focus
Zoria, дак сделайте это за него!

P.S.: Вы чувствуете как улучшается ваш код?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
12.11.2013, 18:22
    #38462507
Zoria
Zoria
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
click() without focus
skyANAZoria, дак сделайте это за него!
как?
skyANAP.S.: Вы чувствуете как улучшается ваш код?
"волк, тебе стало легче - гараздо!!!" зы
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
12.11.2013, 20:36
    #38462641
Малыхин Сергей
Малыхин Сергей
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
click() without focus
Zoriaя привела конкретный рабочий пример, какой обработчик, который скролит ее вниз можно в нем изменить?Каюсь пример рабочий краткий и полностью описывает проблему.
В примере нет обработчика клика который можно изменить =(
Похоже проблема в том что браузер скролит страницу до контрола если он не находится в видимой части страницы.

В интернет браузерах как уже подсказали проблема легко обходится скрытием контрола (display = "none";)
Для прочего можно использовать скачущие костыли на скролТопе =)

Ну если совсем необходимо то можно задать чекбоксу абсолютные координаты и в момент клика перемещать его под мышку и сразу же возвращать обратно (такое решение выглядит просто ужасно (поэтому его нужно реализовать) )
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
12.11.2013, 20:45
    #38462652
Zoria
Zoria
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
click() without focus
Малыхин СергейВ интернет браузерах как уже подсказали проблема легко обходится скрытием контрола (display = "none";)
если бы еще ие8 заставить работать, моему счастью не было бы предела ))))))))
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
12.11.2013, 22:18
    #38462754
Малыхин Сергей
Малыхин Сергей
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
click() without focus
Zoria, как вариант


Код: 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.
<!DOCTYPE html >	
<html>
<head>
</head>
<body>
    <a onclick="unselect(this)">delete</a>
    <div style="height: 1000px">
    </div>
    <label for="input1" id="labelSelect">
        <input id="input1" type="checkbox" checked />
    </label>
    <script>

        function unselect(par) {	
			var c_box, el ; 
		
		
		c_box = document.getElementById("labelSelect");
		c_box.saveStyle = {};
		c_box.saveStyle.display = c_box.style.display;
		
		if('\v'=='v'){ // Если IE .....

				function getOffsetRect(elem) { // Акуратно взято с http://javascript.ru/ui/offset	
						// (1)
						var box = elem.getBoundingClientRect()
						// (2)
						var body = document.body
						var docElem = document.documentElement
						// (3)
						var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop
						var scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft
						// (4)
						var clientTop = docElem.clientTop || body.clientTop || 0
						var clientLeft = docElem.clientLeft || body.clientLeft || 0
						// (5)
						var top  = box.top +  scrollTop - clientTop
						var left = box.left + scrollLeft - clientLeft
						return { top: Math.round(top), left: Math.round(left) }
					};
				

						el = getOffsetRect(par);

						c_box = document.getElementById("labelSelect");

							c_box.saveStyle.position = c_box.style.position;
							c_box.saveStyle.top = c_box.style.top;
							c_box.saveStyle.left = c_box.style.left ;
								
								c_box.style.position = "absolute";
								c_box.style.top = el.top + "px";
								c_box.style.left = el.left + "px";

						c_box.click();
							
							c_box.style.position = c_box.saveStyle.position;
							c_box.style.top = c_box.saveStyle.top;
							c_box.style.left = c_box.saveStyle.left;

		} else { //Если страница открыта в браузере

			c_box.style.display = "none";
			c_box.click();
			c_box.style.display = c_box.saveStyle.display;

		};
}
    </script>
</body>
</html>
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
13.11.2013, 20:44
    #38464085
Zoria
Zoria
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
click() without focus
побила-таки, кажется...
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
<!DOCTYPE html >	
<html>
<head>
<style> input.hideforclick{position: absolute;top: -5000px;}</style>
</head>
<body>
    <a onclick="unselect()">delete</a>
    <div style="height: 1000px">
    </div>
    <label for="input1" id="labelSelect">
        <input id="input1" type="checkbox" checked />
    </label>
    <script>
        function unselect() {
            var el = document.getElementById("input1");
            el.className = "hideforclick";
            document.getElementById("labelSelect").click();
            el.className = "";
        }
    </script>
</body>
</html>
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
14.11.2013, 00:13
    #38464295
Малыхин Сергей
Малыхин Сергей
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
click() without focus
Zoriaпобила-таки, кажется... В последнем хроме прыгает (
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
  1  все
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / click() without focus / 25 сообщений из 28, страница 1 из 2
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение  
Полит. конфиден.  
созд. / загр.: 399ms
Закрыть
start [/forum/topic.php?fid=22&mobile=1&tid=1447663]:
 0ms
get settings:
 9ms
get forum list:
 18ms
check forum access:
 4ms
check topic access:
 4ms
track hit:
 76ms
get topic data:
 11ms
get forum data:
 2ms
get page messages:
 57ms
get tp. blocked users:
 1ms
others: 217ms
total:  399ms
x
x
Закрыть


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