Свойство which/button

В старых IE8- не поддерживалось свойство which, а вместо него использовалось свойство button, которое является 3-х битным числом, в котором каждому биту соответствует кнопка мыши. Бит установлен в 1, только если соответствующая кнопка нажата.

Чтобы его расшифровать – нужна побитовая операция & («битовое И»):

·!!(button& 1) == true (1-й бит установлен), если нажата левая кнопка,

·!!(button& 2) == true (2-й бит установлен), если нажата правая кнопка,

·!!(button& 4) == true (3-й бит установлен), если нажата средняя кнопка.

Что интересно, при этом мы можем узнать, были ли две кнопки нажаты одновременно, в то время как стандартный which такой возможности не даёт. Так что, в некотором смысле, свойство button – более мощное.

Можно легко сделать функцию, которая будет ставить свойство which из button, если его нет:

functionfixWhich(e){

if(!e.which&&e.button){// если which нет, ноесть button... (IE8-)

if(e.button&1)e.which=1;// леваякнопка

elseif(e.button&4)e.which=2;// средняякнопка

elseif(e.button&2)e.which=3;// праваякнопка

}

}

Свойства pageX/pageY

В IE до версии 9 не поддерживаются свойства pageX/pageY, но их можно получить, прибавив к clientX/clientY величину прокрутки страницы.

Более подробно о её вычислении вы можете прочитать в разделе прокрутка страницы.

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

functionfixPageXY(e){

if(e.pageX==null&&e.clientX!=null){// если нет pageX..

var html =document.documentElement;

var body =document.body;

 

e.pageX=e.clientX+(html.scrollLeft|| body &&body.scrollLeft||0);

e.pageX-=html.clientLeft||0;

 

e.pageY=e.clientY+(html.scrollTop|| body &&body.scrollTop||0);

e.pageY-=html.clientTop||0;

}

}

Итого

События мыши имеют следующие свойства:

· Кнопка мыши: which (для IE8-: нужно ставить из button)

· Элемент, вызвавший событие: target

· Координаты, относительно окна: clientX/clientY

· Координаты, относительно документа: pageX/pageY (для IE8-: нужно ставить по clientX/Y и прокрутке)

· Если зажата спец. клавиша, то стоит соответствующее свойство: altKey, ctrlKey, shiftKey или metaKey (Mac).

· Для поддержки Ctrl+click не забываем проверить if (e.metaKey || e.ctrlKey), чтобы пользователи Mac тоже были довольны.

Задачи

Список с выделением

важность: 5

Эта задача состоит из трёх частей.

1. Сделайте список, элементы которого можно выделять кликом.

2. Добавьте мульти-выделение. Если клик с нажатым Ctrl (Cmd под Mac), то элемент добавляется-удаляется из выделенных.

3. Добавьте выделение промежутков. Если происходит клик с нажатым Shift, то к выделению добавляется промежуток элементов от предыдущего кликнутого до этого. При этом не важно, какое именно действие делал предыдущий клик. Это похоже на то, как работает файловый менеджер в ряде ОС, но чуть проще, так как конкретная реализация выделений различается у разных ОС, и её точное воспроизведение не входит в эту задачу.

Демо:

P.S. В этой задаче можно считать, что в элементах списка может быть только текст, без вложенных тегов.
P.P.S. Обработка одновременного нажатия Ctrl(Cmd) и Shift может быть любой.

Открыть песочницу для задачи.

решение

Дерево: проверка клика на заголовке

важность: 3

Есть кликабельноеJavaScript-дерево UL/LI (см. задачу Раскрывающееся дерево).

<ul>

<li>Млекопитающие

<ul>

<li>Коровы</li>

<li>Ослы</li>

<li>Собаки</li>

<li>Тигры</li>

</ul>

</li>

</ul>

 

Nput Events

onblur - When a user leaves an input field
onchange - When a user changes the content of an input field
onchange - When a user selects a dropdown value
onfocus - When an input field gets focus
onselect - When input text is selected
onsubmit - When a user clicks the submit button
onreset - When a user clicks the reset button
onkeydown - When a user is pressing/holding down a key
onkeypress - When a user is pressing/holding down a key
onkeyup - When the user releases a key
onkeyup - When the user releases a key
onkeydownvsonkeyup - Both

Mouse Events

onmouseover/onmouseout - When the mouse passes over an element
onmousedown/onmouseup - When pressing/releasing a mouse button
onmousedown - When mouse is clicked: Alert which element
onmousedown - When mouse is clicked: Alert which button
onmousemove/onmouseout - When moving the mouse pointer over/out of an image
onmouseover/onmouseout - When moving the mouse over/out of an image
onmouseover an image map

Click Events

Acting to the onclick event
onclick - When button is clicked
ondblclick - When a text is double-clicked

LoadEvents

onload - When the page has been loaded
onload - When an image has been loaded
onerror - When an error occurs when loading an image
onunload - When the browser closes the document
onresize - When the browser window is resized