Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 10.04.2010, 09:06
Интересующийся
Отправить личное сообщение для Gloft Посмотреть профиль Найти все сообщения от Gloft
 
Регистрация: 10.05.2009
Сообщений: 13

как различать события onclick и onmousedown на одном элементе
как различать события onclick и onmousedown на одном элементе?
Например обработка событий на элементе id='test' всегда заканчивается с результатом "onMouseDoun"
document.write("<div id='test'>Test onClik and onMouseDoun</div>");
tegTest = document.getElementById('test');
tegTest.onclick = function(){this.innerHTML = "onClick"};
tegTest.onmousedown = function(){this.innerHTML = "onMouseDoun"};

Последний раз редактировалось Gloft, 10.04.2010 в 09:09.
Ответить с цитированием
  #2 (permalink)  
Старый 10.04.2010, 09:11
Новичок на форуме
Отправить личное сообщение для Kolyaj Посмотреть профиль Найти все сообщения от Kolyaj
 
Регистрация: 19.02.2008
Сообщений: 9,177

Что значит как различать?
Ответить с цитированием
  #3 (permalink)  
Старый 10.04.2010, 09:15
Интересующийся
Отправить личное сообщение для Gloft Посмотреть профиль Найти все сообщения от Gloft
 
Регистрация: 10.05.2009
Сообщений: 13

Элемент должен по разному реагировать на два события onclick и onmousedown.
onmousedown используется для перемещения элемента.
onclick - для раскрытия списка.
Ответить с цитированием
  #4 (permalink)  
Старый 10.04.2010, 09:39
Новичок на форуме
Отправить личное сообщение для Kolyaj Посмотреть профиль Найти все сообщения от Kolyaj
 
Регистрация: 19.02.2008
Сообщений: 9,177

Ну так у них разные обработчики событий. В чём проблема?
Ответить с цитированием
  #5 (permalink)  
Старый 10.04.2010, 09:49
Интересующийся
Отправить личное сообщение для Gloft Посмотреть профиль Найти все сообщения от Gloft
 
Регистрация: 10.05.2009
Сообщений: 13

Событие onclick не обрабатывается.
Для проверки замени
tegTest.onclick = function(){this.innerHTML = "onClick"};

на
tegTest.onclick = function(){alert('onClick')};
Ответить с цитированием
  #6 (permalink)  
Старый 10.04.2010, 11:48
Аватар для subzey
Пионэр
Отправить личное сообщение для subzey Посмотреть профиль Найти все сообщения от subzey
 
Регистрация: 16.11.2009
Сообщений: 1,322

Подтверждаю. Opera 10.50.

Не генерируется событие click при щелчке по тексту. При этом при щелчке на самом диве событие стартует. Замена
tegTest.onmousedown = function(){this.innerHTML = "onMouseDoun"};
на
tegTest.onmousedown = function(){
	this.removeChild(this.childNodes[0]);
	this.appendChild(document.createTextNode("textnode test"));
};

приводит к аналогичным результатам.

Поведение следующее:
— mousedown над текстовой нодой;
— замена одной текстовой ноды на другую;
— mouseup над новой текстовой нодой;
— click не генерируется, так как события совершены над разными нодами.

А вот тут-то самое интересное.
Цитата:
A click is defined as a mousedown and mouseup over the same screen location.
Цитата:
The definition of a click depends on the environment configuration; i.e. it may depend on the screen location or the delay between the press and release of the pointing device button. In any case, the event target must be the same between the mousedown, mouseup, and click.
По всей видимости, опера придерживается модели HTML5, при этом считая «event target» не элемент, а ноду.
Ответить с цитированием
  #7 (permalink)  
Старый 10.04.2010, 12:02
Интересующийся
Отправить личное сообщение для Gloft Посмотреть профиль Найти все сообщения от Gloft
 
Регистрация: 10.05.2009
Сообщений: 13

Получется, что фактически нельзя/неэффективно совмещать события onclick и onmousedown на одном элементе.

Для своего случая решил проблему заменив onclick на ondblclick.
Не то что хотел, но зато работает так как и ожидалось.
Ответить с цитированием
  #8 (permalink)  
Старый 10.04.2010, 12:25
Аватар для subzey
Пионэр
Отправить личное сообщение для subzey Посмотреть профиль Найти все сообщения от subzey
 
Регистрация: 16.11.2009
Сообщений: 1,322

Да можно, почему нельзя…
Просто не трогайте особо этот элемент — записывайте данные в другой, или, вообще, alert.
Ответить с цитированием
  #9 (permalink)  
Старый 10.04.2010, 12:34
Интересующийся
Отправить личное сообщение для Gloft Посмотреть профиль Найти все сообщения от Gloft
 
Регистрация: 10.05.2009
Сообщений: 13

Код в первом сообщении я привел как для примера.
В моем случае мне нужно было разделять эти события для управяления меню.
Меню можно переместить (события onmousedown, onmousemove, onmouseup) и свернуть развернуть (событие onclick/ondblclick).
И все это на одном элементе.

Вот пример решения проблемы который был приведен мной в первом сообшении:
var master = (function() {
   // функция обработки события onDblClick
   function mouseOnDblClick(){
      alert('mouseClick');
      return false;
   }

   // функция обработки события onMouseMove
   function mouseMove(){
      alert('mouseDown and mouseMove');
      return false;
   }

   // функция обработки события onMouseUp
   function mouseUp(){
		// очистить обработчики, т.к перенос закончен
		document.onmousemove = null;
		document.onmouseup = null;
		document.ondragstart = null;
		document.body.onselectstart = null;
   }


	function mouseDown(){
		document.onmousemove = mouseMove;
		document.onmouseup = mouseUp;
      document.onclick = mouseOnDblClick;

		// отменить перенос и выделение текста при клике на обьекте
		document.ondragstart = function() {return false};
		document.body.onselectstart = function() {return false};

		return false;

	}

	return {
		makeDraggable: function(element){
			element.onmousedown = mouseDown;
		}
	}
}());

document.write("<div id='test'>Test onClik and onMouseDoun</div>");
master.makeDraggable(document.getElementById('test'));
Ответить с цитированием
  #10 (permalink)  
Старый 10.04.2010, 13:27
Аватар для subzey
Пионэр
Отправить личное сообщение для subzey Посмотреть профиль Найти все сообщения от subzey
 
Регистрация: 16.11.2009
Сообщений: 1,322

Ну, во-первых, для таких вещей используйте, все-таки, addEventListener/attachEvent!

Ну, а во-вторых, Вам таки и не обязатеьно тут использовать событие click.
Поставьте обработчики mouseup, mousedown и mousemove на document, а потом отслеживайте события.
Как это сделать, я расписывал тут и приводил более «живые» примеры тут.

Потом все очень просто. Mousedown на подходящем элементе переводит скрипт в… эм-м… особый режим, когда тот отслеживает mousemove по всему документу, и при этом «гасит» событие через e.preventDefault(). Mouseup, соответственно, это дело завершает.
А теперь мы просто сидим и ждем. Если mousemove случился раньше, чем mouseup, то действет так, будто это драг-н-дроп; если перед mouseup так и не случилось mousemove, то действуем так, будто это клик.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как узнать, что содержит onClick? PHPNoob Events/DOM/Window 3 17.07.2015 12:20
Создание события onclick? kerranswell Events/DOM/Window 31 09.05.2011 21:20
Как в IE динамически установить значение события onClick? Гость Элементы интерфейса 6 16.01.2011 23:46
Для события onCLick получить индекс строки и объект грида. progi2007 ExtJS 4 05.08.2009 11:31
Подскажите как сделать (события onmouseover и onclick) House M.D. Я не знаю javascript 2 04.06.2009 09:50