клик правой кнопкой мыши javascript

Обработчик события onclick

Координаты указателя мыши

Объект события click имеет свойства, которые содержат координаты того места, на котором был произведён клик. Свойства clientX и clientY содержат координаты указателя мыши относительно окна браузера. Свойства pageX и pageY содержат координаты относительно документа. Координаты отсчитываются от левого верхнего угла. Указанные свойства есть и у других объектов событий мыши.

Запустите страницу, прокрутите её до блока и нажмите левую кнопку мыши внутри блока. В блоке должны появиться координаты того места, в котором сработало событие. Координаты могут быть с дробной частью. Это связанно с особенностью расчёта высоты документа в браузере. Напомню, что по умолчанию в браузерах есть отступы и элементы страницы находятся не возле самого края окна браузера, а на некотором расстоянии.

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

Определение координат клика иногда используется на практике для размещения в этом месте каких-то элементов страницы.

Клик с нажатой клавишей

Добавим в обработчик такой код:

Если сделать клик в блоке с нажатой клавишей Shift, то появится сообщение. В остальном, действия обработчика не изменились.

Клик правой кнопкой

В следующих темах будут рассмотрены остальные события мыши.

Коприрование материалов сайта возможно только с согласия администрации

Источник

Форум

Справочник

События мыши: последовательность наступления

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

Виды кликов-событий

mousedown Нажатие на кнопку мыши mouseup Нажатая кнопка мыши отпущена click Клик мыши dblclick Двойной клик contextmenu Правый клик

События mousedown и mouseup в основном используются, когда идет нажатие на кнопку, перемещение, а потом мышь отпускается. Например, при выделении текста, или переносе объекта.

А события click и dblclick в основном нужны для работы с простыми кликами. Клик происходит при последовательных mousedown->mouseup на одном и том же объекте. Если Вы передвините мышь куда-то между mousedown и mouseup, то событие click не произойдет.

Событие contextmenu возникает при правом клике мышью, и по умолчанию вызывает контекстное меню. Не на всех браузер показ меню можно отключить.

Возможность отключения реакции браузера

Но javascript позволяет своим обработчикам событий останавливать обработку событий, так чтобы исключить «родную» реакцию браузера.

Все браузеры позволяют отключать реакцию по умолчанию на левую кнопку мыши.

Фрагмент кода кроссбраузерного обработчика выглядит следующим образом:

Вот сводная таблица по возможности отключения родной реакции браузера:

Последовательность генерации

Левый одиночный клик

Во всех браузерах при клике мышью генерируются события:

Правый одиночный клик

Правую кнопку мыши можно использовать в IE, Firefox и Konqueror. Для остальных браузеров обычно
применяют оригинальное решение: вместо правого клика предлагается shift+click.

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

Средний клик

Однако, в Firefox и Opera к среднему клику привязаны свои действия по умолчанию, которые нельзя отключить через javascript.

Поэтому реально средний клик юзабелен лишь в Internet Explorer и Konqueror.

Двойной клик

Вот полная картина происходящего:

Двойной левый клик

Заметим, что Internet Explorer не генерирует mousedown на втором нажатии.

Двойной правый клик

К счастью, здесь Internet Explorer не пропускает второе событие mousedown.

Двойной средний клик

И, наконец, двойной клик средней кнопкой, которая юзабельна только в Internet Explorer, Konqueror и Safari Win.

Как и в случае с правой кнопкой, этот клик обычно считается за два обычных.

mouseover, mouseout и mousemove

События mouseover и mouseout срабатывают каждый раз, когда мышь заходит на элемент или выходит с него.

Порядок и частота

При переходе с внешнего элемента на внутренний, фиксируется событие onmouseout для внешнего и onmouseover для внутреннего. Смысл в том, что мышь находится ровно «в одном элементе» одновременно: в ближайшем(по z-index) и самом глубоком.

Можно зайти во внутренний элемент, не проходя через внешний.

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

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

Текстовые элементы

Было замечено, что Safari странно обрабатывает mouseover / mouseout при проходе над текстовыми элементами, регистрирует для них события и т.п.

В этом случае можно фильтровать лишние события, проверяя реальное положение мыши.

В 3 версии Firefox события для правой кнопки:
mousedown which=3 button=2
mouseup which=3 button=2
contextmenu which=3 button=2
А не так, как в описании.

Пример тест стенд работает только в IE и FF. В Opera неработает.

не работает правый клик

И не должен. Это фишка оперы.

В настройках Javascript нужно поставить галку «Разрешить перехват щелчков правой кнопки мыши», получится:

mousedown which=3 button=2
mouseup which=3 button=2

Кроме того, событие contextmenu есть только в Firefox и Internet Explorer, причем генерируется в разное время. Это связано с реальным поведением контекстного меню. В Internet Explorer оно появляется только когда отпустишь кнопку.

Гм, Firefox 1.0.8, 1.5.0.x, 2.0.0.x, 3.x под Windows:
нажал – отпустил – контекстное меню
При этом под Linux контекстное меню показывается сразу после «нажал» – по крайней мере, в 2.0.0.x.

Правый одиночный клик (таблица)

Firefox (Windows):
вниз: mousedown
вверх: mouseup, contextmenu

Двойной правый клик (таблица)

Аналогично:
вниз: mousedown
вверх: mouseup, contextmenu
вниз: mousedown
вверх: mouseup, contextmenu

А вот что будет в Firefox под Linux надо проверять (скорее всего, как раз как в таблицах).

Да, так и есть.. Поведение Firefox зависит от операционной системы.

Сделал в таблице дополнительную колонку для Firefox Win/Lin.

Это фишка Линукса в принципе!
Там любое событие происходит при нажатии, а не отпускании клавиш. Зашито в ядро. (например переключение языка)

это все при mousedown

Двоичная арифметика. Здесь клавиши как битовые флаги, соответственно левая=1(как 2 в нулевой степени)+правая=2(как 2 в первой степени)=3
Все взято из соответствующих сообщений ОС Win.

Хотелось бы узнать о возможности скрипта в IE, который бы понимал левый клик мышки по объекту, включающему ссылку на новую вкладку, как клик колесиком мышки

I agree with everything you’ve said. thanks. fencing companies in abilene tx

Источник

Основы событий мыши

В этой главе мы более детально рассмотрим события мыши и их свойства.

Сразу заметим: эти события бывают не только из-за мыши, но и эмулируются на других устройствах, в частности, на мобильных, для совместимости.

Типы событий мыши

Мы можем разделить события мыши на две категории: «простые» и «комплексные».

Простые события

Самые часто используемые простые события:

mousedown/mouseup Кнопка мыши нажата/отпущена над элементом. mouseover/mouseout Курсор мыши появляется над элементом и уходит с него. mousemove Каждое движение мыши над элементом генерирует это событие. contextmenu Вызывается при попытке открытия контекстного меню, как правило, нажатием правой кнопки мыши. Но, заметим, это не совсем событие мыши, оно может вызываться и специальной клавишей клавиатуры.

…Есть также несколько иных типов событий, которые мы рассмотрим позже.

Комплексные события

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

Порядок событий

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

Кликните на кнопку ниже, и вы увидите события. Также попробуйте двойной клик.

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

Получение информации о кнопке: which

Есть три возможных значения:

Средняя кнопка сейчас – скорее экзотика, и используется очень редко.

Модификаторы: shift, alt, ctrl и meta

Все события мыши включают в себя информацию о нажатых клавишах-модификаторах.

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

Например, кнопка внизу работает только при комбинации Alt + Shift +клик:

Поэтому, если мы хотим поддерживать такие комбинации, как Ctrl +клик, то для Mac имеет смысл использовать Cmd +клик. Это удобней для пользователей Mac.

Комбинации клавиш на клавиатуре – это хорошее дополнение к рабочему процессу. Если у пользователя есть клавиатура – они работают. Ну а если на его устройстве её нет – должен быть другой способ сделать то же самое.

Координаты: clientX/Y, pageX/Y

Все события мыши имеют координаты двух видов:

Отключаем выделение

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

Например, двойной клик на текст ниже выделяет его в дополнение к нашему обработчику:

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

Есть несколько способов запретить выделение, о которых вы можете прочитать в главе Selection и Range.

Теперь выделенный жирным элемент не выделяется при двойном клике, а также на нём нельзя начать выделение, зажав кнопку мыши.

Заметим, что текст внутри него по-прежнему можно выделить, если начать выделение не на самом тексте, а до него или после. Обычно это нормально воспринимается пользователями.

Если вы попытаетесь скопировать текст в

Конечно, пользователь имеет доступ к HTML-коду страницы и может взять текст оттуда, но не все знают, как это сделать.

Итого

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

Действие по умолчанию события mousedown – начало выделения, если в интерфейсе оно скорее мешает, его можно отменить.

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

Задачи

Выделяемый список

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

Источник

Мышь: клики, кнопка, координаты

Материал на этой странице устарел, поэтому скрыт из оглавления сайта.

Более новая информация по этой теме находится на странице https://learn.javascript.ru/mouse-events-basics.

В этой главе мы глубже разберёмся со списком событий мыши, рассмотрим их общие свойства, а также те события, которые связаны с кликом.

Типы событий мыши

Условно можно разделить события на два типа: «простые» и «комплексные».

Простые события

Комплексные события

Комплексные можно составить из простых, поэтому в теории можно было бы обойтись вообще без них. Но они есть, и это хорошо, потому что с ними удобнее.

Порядок срабатывания событий

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

Например, клик вызывает сначала mousedown при нажатии, а затем mouseup и click при отпускании кнопки.

Кликните по кнопке ниже и вы увидите, какие при этом происходят события. Попробуйте также двойной клик.

Каждое событие обрабатывается независимо.

Получение информации о кнопке: which

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

На практике оно используется редко, т.к. обычно обработчик вешается либо onclick – только на левую кнопку мыши, либо oncontextmenu – только на правую.

Возможны следующие значения:

Это свойство не поддерживается IE8-, но его можно получить способом, описанным в конце главы.

Правый клик: oncontextmenu

Это событие срабатывает при клике правой кнопкой мыши:

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

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

В примере ниже встроенное меню показано не будет:

Модификаторы shift, alt, ctrl и meta

Во всех событиях мыши присутствует информация о нажатых клавишах-модификаторах.

Например, кнопка ниже сработает только на Alt+Shift+Клик:

Поэтому, если мы хотим поддерживать сочетание Ctrl +click или другие подобные, то под Mac имеет смысл использовать Cmd +click. Пользователям Mac это будет гораздо комфортнее.

Координаты в окне: clientX/Y

Все мышиные события предоставляют текущие координаты курсора в двух видах: относительно окна и относительно документа.

Пара свойств clientX/clientY содержит координаты курсора относительно текущего окна.

При этом, например, если ваше окно размером 500×500, а мышь находится в центре, тогда и clientX и clientY будут равны 250.

Можно как угодно прокручивать страницу, но если не двигать при этом мышь, то координаты курсора clientX/clientY не изменятся, потому что они считаются относительно окна, а не документа.

Проведите мышью над полем ввода, чтобы увидеть clientX/clientY :

Относительно документа: pageX/Y

Так как эти координаты – относительно левого-верхнего узла документа, а не окна, то они учитывают прокрутку. Если прокрутить страницу, а мышь не трогать, то координаты курсора pageX/pageY изменятся на величину прокрутки, они привязаны к конкретной точке в документе.

В IE8- этих свойств нет, но можно получить их способом, описанным в конце главы.

Проведите мышью над полем ввода, чтобы увидеть pageX/pageY (кроме IE8-):

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

Особенности IE8-

Двойной клик

Все браузеры, кроме IE8-, генерируют dblclick в дополнение к другим событиям.

Свойство which/button

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

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

Свойства pageX/pageY

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

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

Итого

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

Задачи

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

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

При клике на заголовке его список его детей скрывается-раскрывается. Выглядит это так: (кликайте на заголовки)

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

Как скрывать/раскрывать детей только при клике на заголовок?

Исходный документ содержит кликабельное дерево.

P.S. Задача – скорее на сообразительность, однако подход может быть полезен в реальной жизни.

Подсказка

У события клика есть координаты. Проверьте по ним, попал ли клик на заголовок.

Самый глубокий узел на координатах можно получить вызовом document.elementFromPoint(clientX, clientY).

…Но заголовок является текстовым узлом, поэтому эта функция для него работать не будет. Однако это, всё же, можно обойти. Как?

Подсказка 2

Можно при клике на LI сделать временный SPAN и переместить в него текстовый узел-заголовок.

После этого проверить, попал ли клик в него и вернуть всё как было.

Источник

Нажатие на кнопку в JavaScript (событие и функции)

Привет всем любителя программирования. Это довольно простой урок по такому событию в JavaScript, как нажатие на кнопку. не смотря на то, что это базовые вещи в JS, реализовать нажатие на кнопку можно разными способами. Давайте предположим, что у нас на странице есть некая кнопка.

Она пока никак не реагирует потому, что мы не повесили на нее никакого события. И давайте рассмотрим первый вариант.

Функция по нажатию кнопки в JavaScript

Событие по клику на кнопку мы создали, но можно сделать то же самое, только напишем функцию, с именем.

А к кнопке добавим эту функцию:

Вывод на страницу по клику на кнопку в JS

Соответственно по нажатию на кнопку в JavaScript можно делать не только всплывающий alert, но и все, что угодно, передавать данные на сервер, изменять элементы на странице, удалять, копировать и много чего еще. Давайте рассмотрим еще один пример. напишем небольшую функцию, которая будет срабатывать по клику и выводить на страницу случайное число. Для этого под кнопкой добавим элемент DIV с классом sum, в котором будем выводить результат работы JavaScript функции.

function randomSum(min, max)

Для кнопки добавим эту функцию по нажатию:

По нажатию на кнопку под ней будет выведено четырехзначное число от 1000 до 9999 в случайном порядке. Это мы указали в специальных параметрах min и max.

Нажатие правой кнопкой мыши в JS

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

Запрещаем вывод контекстного меню при клике правой кнопкой мыши:

Это простейший вызов функции по клику в JavaScript и усваивается без особых трудностей. В дальнейшем рекомендую изучать более сложные функции, которые делают различные операции. Например считают сумму, как в калькуляторе расчета стоимости. Надеюсь этот урок оказался для вас полезным. Если остались вопросы, вы всегда можете задать их в комментариях.

Читайте также:

Как всегда интересно и доступно. Намедни, писал калькулятор расчёта цены металлической решётки на JS и пытался вызвать срабатывание двух фуекций одновременно по нажатию кнопки. Запускались два массива радиокнопок с разными именами и дальше использовались для расчётов. Не получилось и даже пишут, что это не возможно.
Интересует ваше мнение вызова нескольких функций по нажатию только одной кнопки.

Проблем с запуском 2-х функций в JS возникать не должно. Просто эти функции нужно написать отдельно. Возможно у вас какой-то конфликт в коде.

Имеется в виду есть 2 групы или более радио кнопок с возможностью выбора только одной кнопки в каждой группе по параметру value. Хотелось бы написать один код, в котором поставив чекбоксы в радио кнопках использовать их значениня value в этом коде дальше по нажатию кнопки РАССЧИТАТЬ. Каждая группа кнопок перебирается в цикле и определяется значение value одной и второй группы. На самом деле, записав оба цикла последовательно в коде не удаётся далье воспользоваться полученными значениями велью. Если радио кнопки не зависимые, тогда всё в порядке, а если с одним именем не получается.

Не совсем понял. Можно попробовать использовать this и написать один цикл.

Спасибо. Буду пробовать.

Всплывает модальное окно подписки и зависает. Дальше не реагирует.

Доброго времени суток! а как быть в случае когда надо на одной странице несколько раз выполнить одинаковый код обновление div-а с помощью Ajax?
Пример: есть страница строки/столбцы. В одном из столбцов (для каждой строки) есть номер и ттн. По нажатию на кнопку происходит отправка данных. php возвращает некий ответ. Этот ответ отображается в div под кнопкой отправки. Но такая конструкция срабатывает только один раз для первого элемента

$.ajax( <
type: «POST»,
url: url,
data: form.serialize(),
success: function(html) <
$(»).html(html);>>);
return false;
>);

Вам скорее всего нужен формат Json. Об этот я писал здесь.

Данные отправляются через эту конструкцию нормально. php тоже отрабатывает возвращая нужную строку. После в строке success результат от php присваивается некому div-у на странице. Но если это код повторить несколько раз на одной странице то все, которые ниже уже не работают (я так понимаю, что это из за уникальности id-шников)

Соответственно id должны быть разными.

Источник