Javascript.RU

Свойства объекта событие

Update: Более новый материал по этой теме находится по адресу https://learn.javascript.ru/obtaining-event-object.

В объекте события содержится подробнейшая информация о том, что и где произошло.

К сожалению, здесь много кросс-браузерных несовместимостей, однако самые важные из них легко преодолимы.

Тип события можно получить, используя кроссбраузерное свойство type объекта событие.

function getEventType(e) {
	if (!e) e = window.event;
	alert(e.type);
}

Данный код в действии (в примере обрабатываются события click и mouseout):

Чаще всего нужно узнать, на каком элементе сработало событие.

Например, мы поймали на внешнем div'е и хотим знать, на каком из внутренних элементов оно на самом деле произошло.

В Internet Explorer у объекта window.event для этого есть свойство srcElement, в остальных браузерах, работающих по рекомендациям W3C, для этого используется event.target.

Вот пример использования этого свойства. Обработчик стоит только на внешнем диве, но благодаря event.target выводит по клику класс исходного элемента.

<div class="d1" 
  onclick="*!*t=event.target||event.srcElement; alert(t.className)*/!*"
>
<span class="number">1</span>
    <div class="d2">
        <span class="number">2</span>
        <div class="d3">
            <span class="number">3</span>
        </div>
        <a class="d2a" href="javascript:void(0)">Ссылка</a>
    </div>
</div>

Javascript-обработчик в примере висит только на внешнем диве d1 и выглядит примерно так:

function(event) {
  // получить объект событие.
  // вместо event лучше писать window.event
  event = event || window.event

  // кросс-браузерно получить target
  var t = event.target || event.srcElement

  alert(t.className)
}

Для событий mouseout и mouseover предусмотрен способ получить как элемент на который курсор мыши перешел, так и элемент, с которого он перешел.

Эти свойства - relatedTarget в W3C, и fromElement/toElement в Internet Explorer.

// Обработчик для mouseover
function mouseoverHandler(event) {
	event = event || window.event
	var relatedTarget = event.relatedTarget || event.fromElement
	// для mouseover
	// relatedTarget - элемент, *!*с которого*/!* пришел курсор мыши
}

// Обработчик для mouseout
function mouseoutHandler(event) {
	event = event || window.event
	var relTarg = event.relatedTarget || event.toElement
	// для mouseout
	// relatedTarget - элемент, *!*на который*/!* перешел курсор мыши
}

Свойство relatedTarget дополняет target. В нем всегда находится информация о втором элементе, участвовавшем в событии.

Поэтому его можно получить для IE, взяв то свойство из fromElement/srcElement, которое не равно target:

if (!e.relatedTarget && e.fromElement) {
  e.relatedTarget = (e.fromElement==e.target) ? e.toElement : e.fromElement
}

При всплытии - событие по очереди вызвает обработчики на элементе-триггере и дальше, вверх по документу.

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

Стандартный способ получить текущий элемент - использовать переменную this.

Например, при клике на внутренний div, код в этом примере последовательно отмечает элементы, на которых регистрируется всплывающее событие:

1

2

3
<div class="d1" onclick="highlightMe(this)">1
    <div class="d2" onclick="highlightMe(this)">2
        <div class="d3" onclick="highlightMe(this)">3</div>
    </div>
</div>

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

Для этого в объекте event есть два свойства: event.which и event.button, которые содержат числовые значения, соответствующие нажатой кнопке. К сожалению, тут есть некоторые несовместимости.

  Internet Explorer Firefox, Safari Win и Opera Konqueror
ЛЕВАЯ КНОПКА event.which undefined 1 1
event.button 1 0 1
СРЕДНЯЯ КНОПКА event.which undefined 2 2
event.button 4 1 4
ПРАВАЯ КНОПКА event.which undefined 3 3
event.button 2 2 2

Свойство event.which было изначально изобретено Netscape, а event.button использовалось в Internet Explorer.
Через некоторое время браузеры стали использовать оба и все перепуталось.

В стандарте W3C прописано свойство button, которое ведет себя, как в Firefox, т.е:

  • 0 - левая кнопка
  • 1 - средняя кнопка
  • 2 - правая кнопка

Подход создателей браузера Internet Explorer, вообще говоря, более универсальный, так как button является 3-битовым числом, каждый бит которого отвечает за кнопку мыши.

Так, button & 1 (первый бит) установлен в 1, если нажата левая кнопка, button & 2 (второй бит) установлен в 1, если нажата правая кнопка, и button & 4 (третий бит) - если нажата средняя.

В результате мы не можем отловить, когда, например, нажаты левая и правая кнопки, а когда только левая или только правая. К сожалению, это можно сделать только в IE.

Удобнее всего - взять за основу свойство which, которое одинаково поддерживают почти все браузеры.

Остается лишь составить which из button для Internet Explorer:

if (!e.which && e.button) {
  if (e.button & 1) e.which = 1
  else if (e.button & 4) e.which = 2
  else if (e.button & 2) e.which = 3
}

Вот универсальный тестовый стенд по определению клавиш. Выбирайте любую мышь и жмите кнопу из любого браузера - ниже появятся названия событий и значения which/button.


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

Координаты курсора мыши относительно окна находятся в стандартных свойствах clientX/clientY. Они одинаково поддерживается всеми браузерами.

Если у вас есть окно 500x500, и мышь находится в центре, то clientX и clientY будут оба равны 250. Если вы затем проскроллируете документ вниз, налево или вверх, не двигая курсор - значения clientX/clientY не изменятся, так как отсчитываются относительно окна, а не документа.

Как правило, при обработке события нужна позиция мыши относительно документа, учитывающая прокрутку. Стандарт W3C предоставляет для этого свойство pageX/pageY.

Если у вас есть окно 500x500, и мышь находится в центре, то pageX и pageY будут оба равны 250. Если вы затем проскроллируете на 250 пикселей вниз, pageY станет равным 750.

Таким образом pageX/pageY содержат координаты, на каком месте документа произошло событие, учитывая все прокрутки.

Свойства pageX/pageY поддерживаются всеми браузерами, кроме Internet Explorer.

В IE их можно получить из clientX/clientY, прибавив к ним scrollLeft/scrollTop.

Обычно оно находится в <body>: document.body.scrollLeft, но это не всегда так. Например, при выборе Strict DTD оно высчитывается для <html>: document.documentElement.scrollLeft. Кроме того, тэга <body> может просто не быть в документе.

Поэтому мы сначала возьмем html.scrollLeft (если есть), затем проверим body.scrollLeft. Если нет ни того, ни того, то 0.

var html = document.documentElement
var body = document.body
e.pageX = e.clientX + (html && html.scrollLeft || body && body.scrollLeft || 0)

Кроме того, document в IE может быть немного сдвинут с позиции 0,0. Значение сдвига находится в document.documentElement.clientLeft/clientTop, и его также необходимо учесть.

Этот код позволяет надежно получить pageX/pageY для IE, в котором его изначально нет:

if (e.pageX == null && e.clientX != null ) { 
    var html = document.documentElement
    var body = document.body

    e.pageX = e.clientX + (html && html.scrollLeft || body && body.scrollLeft || 0) - (html.clientLeft || 0)
    e.pageY = e.clientY + (html && html.scrollTop || body && body.scrollTop || 0) - (html.clientTop || 0)
}

Этот обработчик mouseMove обновляет координаты мыши относительно документа.

function mouseShowHandler(e){
	e = e || window.event

	if (e.pageX == null && e.clientX != null ) { 
		var html = document.documentElement
		var body = document.body
	
		e.pageX = e.clientX + (html && html.scrollLeft || body && body.scrollLeft || 0) - (html.clientLeft || 0)
		e.pageY = e.clientY + (html && html.scrollTop || body && body.scrollTop || 0) - (html.clientTop || 0)
	}

	
	document.getElementById('mouseX').value = e.pageX
	document.getElementById('mouseY').value = e.pageY
}

Координата X:
Координата Y:

Вы узнали, как работают и как кросс-браузерно получить основные свойства объекта события:

  • Текущий элемент: this
  • Тип события: event.type
  • Элементы-триггеры: event.target/relatedTarget
  • Кнопка мыши: event.which
  • Курсор относительно окна: event.clientX/clientY
  • Курсор относительно документа: event.pageX/pageY

Кроме того, увидели их в действии на демо.

Этих свойств хватает для 95% задач, связанных с событиями.


Автор: Гость (не зарегистрирован), дата: 29 апреля, 2009 - 01:27
#permalink

в опере правую не отследить


Автор: Гость (не зарегистрирован), дата: 4 июня, 2009 - 16:53
#permalink

Отследить можно. Просто в опере по-умолчанию запрещён перехват правой кнопки мыши.


Автор: Гость (не зарегистрирован), дата: 12 июня, 2009 - 19:00
#permalink

Спасибо. спасибо. Я к вам попал с википедии. То, что надо.


Автор: Гость (не зарегистрирован), дата: 12 июня, 2009 - 19:02
#permalink

Не могу понять, почему window.pageXOffset, или ..Y.. вечно ноль показывает. Вы не знаете?


Автор: Илья Кантор, дата: 12 июня, 2009 - 23:44
#permalink

pageXOffset - не очень поддерживаемое свойство..


Автор: Anatolich, дата: 1 июля, 2009 - 20:14
#permalink

При различных разрешениях экрана координаты объектов на странице различные.
Есть ли какое - то решение этого случая?


Автор: Гость (не зарегистрирован), дата: 14 июля, 2009 - 21:39
#permalink
function getEventType(e) {
    if (!e) var e = window.event;
    alert(e.type);

А почему так сложно? Почему нельзя просто

<input type="button" value="Get event type" onclick="alert(window.event.type)" />

Автор: Гость (не зарегистрирован), дата: 17 июля, 2009 - 09:22
#permalink

лол, ну всё, теперь тебе можно идти в web-разработчики без высшего и заработной платой не меньше $5000 в месяц, просто утер нос автору)

А статья действительно хорошая, спасибо.


Автор: Delfi, дата: 22 мая, 2010 - 16:16
#permalink

Человек пытается понять, а вы налетели...
Поступаете еще глупее, чем он...


Автор: Гость (не зарегистрирован), дата: 14 апреля, 2010 - 00:45
#permalink

Потому что из-за таких, как ты, скрипты на сайтах работают только в ИЕ...


Автор: Гость (не зарегистрирован), дата: 15 июля, 2013 - 14:14
#permalink

У автора есть проверка у тебя её нет


Автор: apxat (не зарегистрирован), дата: 9 августа, 2009 - 01:22
#permalink

Было бы полезно добавить полный код последнего примера (демо), всмысле хтмл для полей в которых выводятся координаты, не совсем понял как они в реальном времени работают.


Автор: ze8s, дата: 9 августа, 2009 - 17:10
#permalink

да вроде обработчик повешен на mousemove и он при движении мышки меняет значения в полях на коорд мышки автоматом.


Автор: Гость (не зарегистрирован), дата: 27 марта, 2010 - 10:16
#permalink

Мне кажется, с отслеживанием координат мышки автор слегка лукавит. Не спроста вызов MouseShowHandler остался за кадром. Там встречаются неизвестные всякие JQuery и AJAX. Очевидно, так просто из скрипта MouseMove не перехватить Sad


Автор: Гость (не зарегистрирован), дата: 14 апреля, 2010 - 00:48
#permalink

Не паникуем, а учим матчасть тщательнее. Все так, как написано.


Автор: Гость (не зарегистрирован), дата: 5 июля, 2011 - 06:08
#permalink

Ололо нубик. JavaScript выполняется на стороне клиента.
ы) jQuery AJAX и все такое гы гы гы.


Автор: AraGnom, дата: 9 ноября, 2009 - 23:36
#permalink

Почему в FireFox v3 "демо" для следующего хтмл кода не работает???:

.headwindow {
background-color: #03F;
height: 20px;
width: auto;
}

div класс="headwindow" онКлик="mouseShowHandler()" /div

форма
инпут id="mouseX" type="text"
инпут id="mouseY" type="text"
/форма

Проверял алертом, обработка скрипта слетает после:if (e.pageX == null && e.clientX != null )???подскажите плззз)))


Автор: Гость (не зарегистрирован), дата: 10 ноября, 2009 - 20:59
#permalink

div класс="headwindow" онКлик="mouseShowHandler()" /div
в этой строчке mouseShowHandler() введен без параметра, а в демо который ты взял сверху этот параметр есть, обрати внимание на определение function mouseShowHandler(e)


Автор: AraGnom, дата: 11 ноября, 2009 - 20:27
#permalink

во первых, что ты предлагаешь туда передать, а во вторых в функции обрабатывается передаваемое событие, и если оно не определено то определяется. здесь причина в кросбраузерности, т.к. в IE и Opera все работает норм, а в firefox - нет


Автор: bga (не зарегистрирован), дата: 15 ноября, 2009 - 22:12
#permalink

хочу уточнить что в IE window.event является readonly объектом и по этому чтобы код работал корректно нужно клонировать window.event с помощью встроенной IE функции var e=document.createEventObject(window.event)


Автор: Гость (не зарегистрирован), дата: 14 апреля, 2010 - 00:53
#permalink

А в него никто ничего и не пишет.


Автор: Gera (не зарегистрирован), дата: 20 ноября, 2009 - 17:46
#permalink

Если у вас есть окно 500x500, и мышь находится в центре, то pageX и pageY будут оба равны 250. Если вы затем проскроллируете на 250 пикселей вниз, pageY станет равным 750.

250+250 = 750?


Автор: aH6y, дата: 18 июля, 2010 - 13:29
#permalink

pageY = 750 если курсор будет в самом низу окна.
а если по середине т.к. мы скролл крутим, то сдвинеться на 250 px итого 500px

учи математику...


Автор: Гость (не зарегистрирован), дата: 15 июля, 2013 - 14:24
#permalink

В том то и дело что мы скролим колёсиком а не двигаем мышку автор просто ошибся. 500 там будет pageY


Автор: Александр88 (не зарегистрирован), дата: 8 декабря, 2009 - 20:07
#permalink

А есть ли возможность передать событие родительскому элементу?

Например, есть обработчик события для параграфа в диве (на моуздаун). И дивов таких два. Могу ли я из этого обработчика узнать в каком диве параграф, на который щелкнули?


Автор: Леонид Розенблюм, дата: 16 января, 2010 - 19:37
#permalink

В этом обработчике можно взять target (srcElement).parentNode.
Или навесить обработчики на сами дивы а не на параграфы.


Автор: Гость (не зарегистрирован), дата: 14 декабря, 2009 - 16:33
#permalink

Автору респект


Автор: mauser (не зарегистрирован), дата: 16 декабря, 2009 - 02:28
#permalink

Столкнулся с тем, что relatedTarget или toElement не хотят работать в FF. Есть функция, вызываемая по onMouseOut с ячейки

function menu_out_main (){
var objTo = window.event.toElement
alert(objTo);
}

В IE и Opera алерт появляется, в FF же - ноль реакции. Кто-нибудь знает, в чём дело?


Автор: B@rmaley.e><e (не зарегистрирован), дата: 16 декабря, 2009 - 14:49
#permalink

relatedTarget в FF работает, toElement – нет.
Только нету у лисы event'а в глобальном пространстве имен. event передается первым аргументом функции-слушателю события.

document.getElementById('mBox').addEventListener('mouseover', function (event){
		var objTo = (event||window.event).relatedTarget
		alert(objTo);
	}, false);

Или, если задавать в коде страницы (Хоть это и не очень хорошо)

...<td onmouseover="eventListener(event)">...
function eventListener(event){
	var objTo = (event||window.event).relatedTarget
	alert(objTo);
}

P.S. Не уверен, насчет поддержки ослом event'а через инлайновое задание ф-ии. Если будут проблемы, попробуйте приписать var event; перед вызовом ф-ии.


Автор: Zander (не зарегистрирован), дата: 29 декабря, 2009 - 04:25
#permalink

А может кто подскажет как скрипту определить что окно прокручено? Или хоть в какую сторону копать нужно?
Задача стоит такая:
Есть шапка с определённым размером и есть блок под шапокой, вот при вертикальной прокрутке нужно что бы блок сначала ехал за шапкой, а потом уже висел под верхом окна броузера. Я где то видел такое реализованное но ессно вспомнить нимагу(((


Автор: Гость (не зарегистрирован), дата: 30 декабря, 2009 - 08:52
#permalink
function getBodyScrollTop()
{
  return self.pageYOffset || (document.documentElement && document.documentElement.scrollTop) || (document.body && document.body.scrollTop);
} // (c) tigir.com

Функция возвращает значение, насколько прокручен документ.


Автор: Гость (не зарегистрирован), дата: 24 января, 2010 - 08:05
#permalink

Как я рад, это то что надо!!!


Автор: Кошка (не зарегистрирован), дата: 26 января, 2010 - 17:52
#permalink

Здравствуйте у меня следующая проблемка.
Нужно организовать поиск по массиву так, как реализован поиск в яндексе.
Т.е есть некий массив $mas (этот массив формируется в php-коде);

На html-форме есть текстовое поле ввода
При начале ввода текста c клавиатуры в это поле, т.е. при срабатывании события onkeyup (насколько я понимаю), под текстовым полем ввода должна появляться текстовая область ввода

В которую должны выводиться элементы из массива $mas, начинающиеся с символов, введённых в текстовом поле Pole, причем элементы массива выводятся с новой строки.
Пользователь должен иметь возможность выбрать из предложенных элементов тот, что ему нужен. И по клику мышкой выбранный элемент должен появиться в поле Pole, а текстовая область TextOblast исчезнуть, т.е. стать невидимой.

PS это вообще реально сделать с помощью JavaScript?


Автор: Гость (не зарегистрирован), дата: 14 апреля, 2010 - 00:57
#permalink

Да


Автор: Jourando (не зарегистрирован), дата: 29 июня, 2010 - 13:49
#permalink

Кошка, открываем Ajax и внимательно читаем (если массив берется с сервера... про то что массив с сервера предполагаю по упоминанию PHP)


Автор: thunder2, дата: 25 февраля, 2010 - 02:17
#permalink

Вставил вот этот код

function mouseShowHandler(e){
e = e || window.event

if (e.pageX == null && e.clientX != null ) {
var html = document.documentElement
var body = document.body

e.pageX = e.clientX + (html && html.scrollLeft || body && body.scrollLeft || 0) - (html.clientLeft || 0)
e.pageY = e.clientY + (html && html.scrollTop || body && body.scrollTop || 0) - (html.clientTop || 0)
}

document.getElementById('mouseX').value = e.pageX
document.getElementById('mouseY').value = e.pageY
}
на страницу. И странное дело: в ФФ и пр. код работает, а в ИЕ ругается на if (e.pageX == null && e.clientX != null ). Хотя на странице этого сайта этот код работает нормально. Естественно этот код поместил в функцию, а функцию присвоил собитию onckick элемента.
Чё может быть ?


Автор: Delfi, дата: 22 мая, 2010 - 16:21
#permalink

При вызове функции передавался event? Не уверен, но причина может быть в этом...


Автор: kill3rl88p (не зарегистрирован), дата: 9 марта, 2010 - 21:22
#permalink

Подскажите как лучше всего реализовать следующую штуку:
на документе только одна большая таблица, нужно реализовать "выделение" ячеек:
нажимаем кнопку мыши на первой, тащим вниз, отпускаем. При этом "выделенные" области как-нибудь выделяются (например фон у них становится темнее). Тут еще появляется одна проблема - стандартное выделение, которое делает браузер - возможо ли его как нибудь убрать или скрыть?


Автор: Гость (не зарегистрирован), дата: 14 апреля, 2010 - 01:06
#permalink

Сводится к геометрической задаче на определение того, перекрывает ли некий прямоугольник массив других прямоугольников. "Некий" прямоугольник определяется точкой, где произошло событие маусдаун, и точкой, где произошло событие маусап.

От выделения можно избавиться.


Автор: A1eX (не зарегистрирован), дата: 17 марта, 2010 - 00:34
#permalink

Подскажите пожалуйста,как узнать в какую сторону был прокручен документ,
т.е. какое событие сработало: scrollTop или scrollLeft и можно ли узнать на сколько пикселей был прокручен документ?


Автор: Гость (не зарегистрирован), дата: 14 апреля, 2010 - 01:08
#permalink

Автор: Гость (не зарегистрирован), дата: 14 апреля, 2010 - 01:09
#permalink

См. на 5 постов 1-го уровня выше.


Автор: Andrew.R (не зарегистрирован), дата: 23 марта, 2010 - 01:07
#permalink

Подскажите в чем ошибка данного кода для FF (срабатывает через раз), для IE все нормально.
// определен обработчик для всего документа
document.onmouseover = setupEffect;
document.onmouseout = cleanupEffect;
// функции обработки, кроссплатформенные
function setupEffect(event) {
var event = event || window.event;
var relTag = event.relatedTarget || event.toElement;
selmenu(relTag) }
function cleanupEffect(event) {
var event = event || window.event;
var relTag = event.relatedTarget || event.fromElement;
selmenu(relTag)}
// базовый обработчик
function selmenu(src) {
while ("HTML" != src.tagName) {
< текст обработчики >
}
И вот тут то как раз в FF пишет что src не определен. Хотя если поводить мышью по странице иногда сюда поступает событие. Самое интересное если отключить одну из двух исходных функциф (cleanupEffect или setupEffect) то в selmenu всегда передается src без ошибок.
В чем тут глюк в FF?
p.s. вообще FF странно работает в отличие от IE (даже старых версий)


Автор: Гость (не зарегистрирован), дата: 25 марта, 2010 - 01:49
#permalink

Может быть:

document.onmouseover = setupEffect();
document.onmouseout = cleanupEffect();

или вообще:

document.onmouseover = function(){setupEffect()}
document.onmouseout = function(){cleanupEffect()}


Автор: Гость (не зарегистрирован), дата: 25 марта, 2010 - 01:55
#permalink

Также можно попробовать перехватывать события не из document, а из document.body


Автор: Гость (не зарегистрирован), дата: 14 апреля, 2010 - 01:13
#permalink

Не надо так пробовать


Автор: Гость (не зарегистрирован), дата: 25 марта, 2010 - 02:02
#permalink

Ещё чего-то в памяти всплывает, что в FF event как особенно передаётся, типа:

document.onmouseover = setupEffect(event); // или setupEffect(), а event автоматом передаётся по значению в переменную "e", по экспериментируйте
document.onmouseout = cleanupEffect(event); // или cleanupEffect()

function cleanupEffect(e) {
...
}

function setupEffect(e) {
...
}


Автор: max5600 (не зарегистрирован), дата: 10 мая, 2010 - 16:04
#permalink

Сделайте так, чтобы можно было копировать код, представленный на ваших страницах, без 01 02 03 04 и так далее.


Автор: Delfi, дата: 22 мая, 2010 - 16:22
#permalink

Там есть кнопка для этого


Автор: X000R (не зарегистрирован), дата: 14 июля, 2010 - 18:26
#permalink

Была проблема с фоксом. В функции аналогичной mouseShowHandler() он упорно твердил что e=undefined. По моему автор не указал что 'e' объект временный !
И считать координаты надо не отходя от кассы.

var mCur;

window.onmousemove=function(e)
				{
					mCur = mousePageXY(e); 
				}

			function mousePageXY(e)
				{
  				var x = 0, y = 0;
				if (!e) e = window.event;

  					if (e.pageX || e.pageY)
  					{
    				x = e.pageX;
    				y = e.pageY;
  					}
  					else if (e.clientX || e.clientY)
  					{
    				x = e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft) - document.documentElement.clientLeft;
    				y = e.clientY + (document.documentElement.scrollTop || document.body.scrollTop) - document.documentElement.clientTop;
  					}
				return {"x":x, "y":y};
				}

таким образом текущие координаты будут доступны из любого места кода в любое время, как свойсва объекта mCur: mCur.x , mCur.y


Автор: Wayne (не зарегистрирован), дата: 13 августа, 2011 - 11:17
#permalink

Вот рабочий вариант данного сценария:
function mousePageXY(e)
{
var x = 0;
var y = 0;
if (!e) e = window.event;
if (e.pageX || e.pageY)
{
x = e.pageX;
y = e.pageY;
}
else if (e.clientX || e.clientY)
{
x = e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft) - document.documentElement.clientLeft;
y = e.clientY + (document.documentElement.scrollTop || document.body.scrollTop) - document.documentElement.clientTop;
}
return {"x":x, "y":y};
}

document.onclick = function(e)
{
var MouseCoords = mousePageXY(e);
document.getElementById('CursorX').value = MouseCoords.x;
document.getElementById('CursorY').value = MouseCoords.y;
}


Автор: Гость (не зарегистрирован), дата: 4 августа, 2010 - 15:11
#permalink

Как отследить событие изменения текстового поля при автоматическом заполнении из выпадающего списка ранее вводимых значений сохраненных браузером (FF3)?
onkeyup - при ручном вводе
onchange - только после смене фокуса с этого элемента
...


Автор: Glinkz, дата: 5 января, 2011 - 13:27
#permalink

по ходу прочтения статьи навязался вопросик:
есть у меня таблица, в которой есть несколько ячеек.
какой обработчик надо повешать на таблицу, что бы при клике на один из элементов, которые она содержит, я мог получить id этого элемента?


Автор: Jeer, дата: 23 января, 2011 - 16:59
#permalink

Ребят, сколько ни ковыряю, что-то не могу разобрать. Можно ли самому создать такое событие, которое устанавливает значения ClientX/ClientY (pageX/pageY), а не просто получает их? Подскажите, для примера, функцию, автоматизирующую некоторое перетаскивание:
1. Устанавливаются заданные координаты Х,Y (150, 250)
2. Происходит нажатие левой кнопки мыши
3. Устанавливаются другие координаты (200,300)
4. Происходит отпускание кнопки
Это бы всё расставило на свои места, заранее благодарю.


Автор: exec, дата: 24 января, 2011 - 16:11
#permalink

Полезно было бы добавить, что в Safari в event.target может попадаться текстовая нода, поэтому надо делать проверку:

if (target.nodeType === 3)
	target = target.parentNode;

Автор: Любопытствующий (не зарегистрирован), дата: 31 января, 2011 - 23:24
#permalink

Умно!
А как программно подвинуть курсор мыши?
Второй вопрос как программно нажать кнопки на мыши?
можно какиенибудь не затейливые примерчики .


Автор: Гость (не зарегистрирован), дата: 8 июля, 2011 - 15:36
#permalink

просто
invoke mouse_event, 7h, xMove, yMove, NULL, NULL
Но не в браузере и не в джаве)


Автор: Grundiss (не зарегистрирован), дата: 4 февраля, 2011 - 07:03
#permalink

А как в ИЕ получить значение позиции курсора мыши относительно элемента? В FF для этих целей используется свойство event.layerX, а в ИЕ?


Автор: Kapillar, дата: 6 февраля, 2011 - 20:32
#permalink

Тип события можно получить, используя кроссбраузерное свойство type объекта событие.

1 function getEventType(e) {
2 if (!e) e = window.event;
3 alert(e.type);
4 }
Данный код в действии (в примере обрабатываются события click и mouseout):
недопонял, как этот код обрабатывает событие, ведь так тоже обработка произойдет:
/ input value="определение" onmouseout="alert('mouseout');" onclick="alert('click');" type="button" /


Автор: Алексеище (не зарегистрирован), дата: 2 марта, 2011 - 15:31
#permalink

Ваш последний пример, как я понял, перехватывает событие mousemove, по этому он становится не совсем наглядным для демонстрации PageX/PageY при скроллинге и недвижимой мышке.


Автор: Mixail (не зарегистрирован), дата: 30 марта, 2011 - 13:54
#permalink
function mouseShowHandler(e){
		e = e || window.event

		if (e.pageX == null && e.clientX != null ) { 
			var html = document.documentElement
			var body = document.body
		
			e.pageX = e.clientX + (html && html.scrollLeft || body && body.scrollLeft || 0) - (html.clientLeft || 0)
			e.pageY = e.clientY + (html && html.scrollTop || body && body.scrollTop || 0) - (html.clientTop || 0)
		}

		
		document.getElementById('mouseX').value = e.pageX
		document.getElementById('mouseY').value = e.pageY
	}

Автор забыть указать Важный момент, что он использовал метод вызова на jq

$(document).mousemove(mouseShowHandler);

Если кому интересно без jq, то делается это следующим образом в body прописывается функция onmousemove.

<body onmousemove="mouseShowHandler(event);">

Автор: Sweet, дата: 30 марта, 2011 - 19:19
#permalink

Что за бред? Причем тут вообще jQuery???Blink Попытка съумничать не засчитана!!!


Автор: Mixail (не зарегистрирован), дата: 30 марта, 2011 - 13:55
#permalink

забыл*


Автор: Гость (не зарегистрирован), дата: 8 апреля, 2012 - 23:43
#permalink

Необходимо уточнение: для Firefox в обязательно прописать

onmousemove="mouseShowHandler(event);"

Автор: Гость (не зарегистрирован), дата: 10 апреля, 2011 - 05:34
#permalink

На FireFox 4 на сдешней странице всё нормально, а отдельно код с определением места курсора не идет. Почему и как исправить?


Автор: Гость (не зарегистрирован), дата: 19 апреля, 2011 - 17:05
#permalink

А зачем дополнительно проверять на существование html в
e.pageX = e.clientX + (html && html.scrollLeft || body && body.scrollLeft || 0) - (html.clientLeft || 0);?
Ведь html всегда существует, а в случае отсутствие у него свойства scrollLeft и так будет выдаваться undefined, т.е. значение false?
Тем более, что дальше в этой же строчке вводим проверяем свойство html.clientLeft без проверки на существование html?


Автор: kent666, дата: 29 апреля, 2011 - 13:25
#permalink

Здравствуйте!
Можете объяснить принцип работы переменной this
Как я понимаю это что-то на подобии event. Он будет вноситься в функцию первым аргументом или вторым если в аргументах есть event.
А далее можно будет не прописывать
var X=document.getElementById...
а просто
this.style.color... например для смены цвета объекта на котором сработал обработчик


Автор: gyrdym, дата: 29 июля, 2011 - 15:17
#permalink

this это указатель на объект, вызвавший событие, передавать в качестве параметра его не обязательно


Автор: Wayne (не зарегистрирован), дата: 13 августа, 2011 - 03:53
#permalink

function getEventType(e) {
if (!e) e = window.event;
alert(e.type);
}

Автор, пожалуйста, будь так добр пояснить сий "трюк". Что за чёртова буква "e"? Как это вообще работает? Почему в финальном демо при назначение функции обработчиком события она работает? Как? Откуда она берёт параметр e для своей работы, если эта функция нигде не вызывается и никто ей не передаёт параметров?
Если это особенность вызова функции без параметров, тогда как в её описание/определение аргументы всё же указаны, то следовало бы указать эту деталь.

Как я понял. А я ничерта не понял как это работает! Финальное демо обрабатывает событие. Когда функция назначается обработчиком события onmousemove, то она при исполнение получает вместо e - это самое событие onmousemove. Видимо, это особенность работы функций в JS. И как это понимать? Как всё это происходит??????? Где почитать?

У меня вообще сложилось впечатление, что в данной статье использовался кривой подход к объектному программированию. Вроде как об ООП речи не идёт, но в то же время используются принципы ООП.

Простите мне мою горячность, но статья без пояснения вышеописанной детали бред. Я прочитал всю статью. Рылся в интернете. И так за 2 дня не понял весь механизм работы демо в финале статьи!!! Я в ярости.


Автор: B@rmaley.e><e, дата: 13 августа, 2011 - 10:53
#permalink

Я прочитал всю статью. Рылся в интернете. И так за 2 дня не понял весь механизм работы демо в финале статьи!

А Вы введение в события прочитали?


Автор: Wayne, дата: 5 сентября, 2011 - 02:05
#permalink

Читал. Но я там не нашёл нужной для понимания детали. До неё пришлось доходить самому. А в статье упоминается это лишь вскользь. Ключевым оказалось то, что event - не простая переменная/имя. При появление этого "слова" происходит передача объекта события в функцию. Так что не совсем точным оказалось определение о понятие объекта события и о том, как оно ловиться функцией.
Также, всё зависит ещё и от способа назначения обработчика.

P.S. До конца я ещё не понял весь механизм. Поэтому мои слова тут вполне могут быть ошибочными ещё.


Автор: Wayne (не зарегистрирован), дата: 13 августа, 2011 - 03:59
#permalink

Вот ещё одна мега промашка.

"Координаты курсора мыши относительно окна находятся в стандартных свойствах clientX/clientY. Они одинаково поддерживается всеми браузерами."

"Как правило, при обработке события нужна позиция мыши относительно документа, учитывающая прокрутку. Стандарт W3C предоставляет для этого свойство pageX/pageY."

ииии??? и что же такое на самом деле pageX/clientX?? Что ещё за стандартные свойства? Сколько уже скриптов писал, ни разу в жизни не сталкивался с общим однозначным понятием для всех JS под названием "стандартный свойства". Ладно. Не буду негодовать.

Я хочу через alert узнать x координату своей мыши относительно окна. Например, используя СТАНДАРТНОЕ СВОЙСТВО clientX. К жопе чего мне нужно приписать .clientX?????
alert(xxx.clientX)
Что должно стоять на месте "xxx", чтобы я в результате срабатывания alert получил искомую свою координату мыши?

Спасибо, что терпеливо прочитали мои возмущения. Пожалуйста. Обойдетесь без бессмысленных ответов. Я перечитал все комментарии к этой статье. Из низ 90% бессмысленны и не отвечают на поставленные вопросы полноценным образом.


Автор: B@rmaley.e><e, дата: 13 августа, 2011 - 10:31
#permalink

К жопе чего мне нужно приписать .clientX?

Название страницы читали? Я Вам его даже напомню: "Свойства объекта событие". Путем нетрудных умозаключений получаем, что clientX - свойство объекта "событие". В первом же пункте показан пример работы с этим объектом.

и что же такое на самом деле pageX/clientX?

А Вы статью читали?

Координаты курсора мыши относительно окна находятся в стандартных свойствах clientX/clientY

Как правило, при обработке события нужна позиция мыши относительно документа, учитывающая прокрутку. Стандарт W3C предоставляет для этого свойство pageX/pageY.

Что ещё за стандартные свойства?

Свойства, описанные стандартом.


Автор: Wayne (не зарегистрирован), дата: 13 августа, 2011 - 10:46
#permalink

Спасибо за гениальный ответ. Всегда восхищался людьми, которые отвечают на вопросы не отвечая на вопросы.
P.S. Всё я читал. Не волнуйтесь. Я трудолюбивый и очень дотошный.


Автор: Wayne (не зарегистрирован), дата: 13 августа, 2011 - 10:47
#permalink

А вот вы, мой комментарий чуть выше, не читали.


Автор: B@rmaley.e><e, дата: 13 августа, 2011 - 12:37
#permalink

Да, не читал, поскольку отвечаю на комментарии в порядке их вывода в блоке "Последние комментарии". И я как-то считаю, что если у человека есть вопросы, то он вполне может уместить их в одном комментарии, и поэтому не счел нужным читать предыдущие.


Автор: Гость (не зарегистрирован), дата: 17 февраля, 2012 - 21:41
#permalink

Доброго времени суток! может вы сможете мне помочь? мне надо чтобы вот в этом тексте

$(function () {

function makeTabs(contId) {
var tabContainers = $('#'+contId+' div.tabs > div');
tabContainers.hide().filter(':ID').show();

$('#'+contId+' div.tabs ul.tabNavigation a').click(function () {
tabContainers.hide();
tabContainers.filter(this.hash).show();
$('#'+contId+' div.tabs ul.tabNavigation a').removeClass('selected');
$(this).addClass('selected');
return false;
}).filter(':ID').click();
}

});

ID было не названием (сейчас ид (в ксс) материала у меня работает как просто название) а конкретным, уникальным номером задающим, свое, уникальное название-номер для таба.
Если не сложно конечно...


Автор: вафавафвафвафывафыафыафы (не зарегистрирован), дата: 23 февраля, 2012 - 15:23
#permalink

лучше б вы показали как отслеживать положение экрана относительно документа


Автор: Гость (не зарегистрирован), дата: 28 февраля, 2012 - 16:22
#permalink

Совсем ничего не получается, устал....

координаты определяются и в ИЕ и в Опере, но только не в FF Sad((((

помогите, пожалуйста....что я не так делаю?

вот тестовая страница: killarney.ru/event-test2.htm


Автор: Гость (не зарегистрирован), дата: 8 апреля, 2012 - 23:45
#permalink

Для файрфокса тег body должен выглядеть так:

<body onmousemove="mouseShowHandler(event);>

(event) - обязательно


Автор: Малик (не зарегистрирован), дата: 8 августа, 2012 - 20:53
#permalink

А можно получить координаты относительно какого-нибудь блока?


Автор: Александр 60 лет (не зарегистрирован), дата: 2 ноября, 2012 - 12:42
#permalink

Уважаемые !! помогите пожалуйста !!
как положить координаты ,клик .и двойной клик мышки в текстовый файл ?
бьюсь пятые сутки ...помогите !!


Автор: Anemic (не зарегистрирован), дата: 2 ноября, 2012 - 21:13
#permalink

Для этого Вам нужно воспользоватся AJAX запросом, которым Вы передаете на серверную сторону координаты, и уже php на серверной стороне запишет их в нужный файл.


Автор: morfeus (не зарегистрирован), дата: 4 декабря, 2012 - 15:30
#permalink

Не могу понять почему в Опере 12 нажатие на среднюю кнопку (колесико) не вызывает срабатывания onmousedown/ что за фича такая? И можно это поправить? Ответьте, уважаемые знатоки Java Script.


Автор: Mikee, дата: 13 октября, 2013 - 09:00
#permalink

Друзья, с clientX и clientY не все так радужно, как описано в статье.
Они одинаково поддерживается всеми браузерами.

Это не правда. Если быть точным, это не для всех событий правда.
Например, мне надо было отследить положение курсора во время скроллинга. Мне нужно только свойство clientX. Так вот у события onscroll этого свойства в FF не обнаружилось. И на планшетном (сенсорном) Chrome, хотя на виндузовом Chrome все работает.


Автор: ЖИРАФ (не зарегистрирован), дата: 9 января, 2014 - 15:59
#permalink

Тема статьи "Свойства объекта событие", но, почему-то, ничего не сказано, например, о событии "onkeypress". =( грустно...


Автор: Гость (не зарегистрирован), дата: 14 мая, 2014 - 11:06
#permalink

куйциц


Автор: alexan0308, дата: 5 августа, 2014 - 17:05
#permalink

Хорошая статья, спасибо =) Мне очень пригодилось при написании событий клика мышью по объектам.


Автор: new_developer, дата: 6 августа, 2014 - 23:02
#permalink

if (!e.relatedTarget && e.fromElement) {
e.relatedTarget = (e.fromElement==e.target) ? e.toElement : e.fromElement
}

кто может разшифровать эту строку?)


Автор: Sahaviev, дата: 22 августа, 2014 - 09:11
#permalink

Кроссбраузерный(т.к. IE работает не по стандартам W3C) способ получения элемента на который перешел курсор мыши при событии mouseout.

Если не понимаешь саму строку, тогда учи краткую запись If.


Автор: Гость (не зарегистрирован), дата: 7 декабря, 2014 - 22:02
#permalink

Мышка-клавиатура-загрузка_страницы это чудно. Но что насчёт событий tap&swipe? Заранее благодарен.


Автор: Александр Волошин (не зарегистрирован), дата: 4 сентября, 2015 - 14:16
#permalink

Здравствуйте, не могу понять как на Firefox у вас вызывается событие click даже когда кликаю средней кнопкой мыши.


Автор: Гость (не зарегистрирован), дата: 23 июня, 2016 - 16:19
#permalink

А если мне нужно вторым аргументом callback передать, как это сделать не трогая event который идет первым аргументом?


Автор: Гость (не зарегистрирован), дата: 14 декабря, 2016 - 18:55
#permalink

Люди, помогите с такой проблемой. Есть графический объект, передвигающийся за курсором мыши. Но мне необходимо знать, куда мышь в данный момент передвигается: влево или вправо, чтобы менять этот графический объект в зависимости стороны передвижения мыши. Перекопал инет. Подобной задачи никто не решал.


Автор: Гость (не зарегистрирован), дата: 15 декабря, 2016 - 08:07
#permalink

А маргинами не пробовал?


Отправить комментарий

Приветствуются комментарии:
  • Полезные.
  • Дополняющие прочитанное.
  • Вопросы по прочитанному. Именно по прочитанному, чтобы ответ на него помог другим разобраться в предмете статьи. Другие вопросы могут быть удалены.
    Для остальных вопросов и обсуждений есть форум.
P.S. Лучшее "спасибо" - не комментарий, как все здорово, а рекомендация или ссылка на статью.
Содержание этого поля является приватным и не предназначено к показу.
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Разрешены HTML-таги: <strike> <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <u> <i> <b> <pre> <img> <abbr> <blockquote> <h1> <h2> <h3> <h4> <h5> <p> <div> <span> <sub> <sup>
  • Строки и параграфы переносятся автоматически.
  • Текстовые смайлы будут заменены на графические.

Подробнее о форматировании

CAPTCHA
Антиспам
10 + 1 =
Введите результат. Например, для 1+3, введите 4.
 
Текущий раздел
Поиск по сайту
Реклама
Содержание

Учебник javascript

Основные элементы языка

Сундучок с инструментами

Интерфейсы

Все об AJAX

Оптимизация

Разное

Дерево всех статей

Последние комментарии
Последние темы на форуме
Forum