jQuery метод .mousedown()

Определение и применение

jQuery метод .mousedown() привязывает JavaScript обработчик событий "mousedown" (нажатие кнопки мыши на элементе), или запускает это событие на выбранный элемент.

Событие "mousedown" срабатывает при нажатии любой кнопки мыши, если Вам необходимо определить какая конкретно нажата кнопка, то вы можете воспользоваться свойством which объекта Event. Значению 1 соответствует левая кнопка, 2 - средняя кнопка и 3 для правой кнопки. Пример находится внизу страницы.

jQuery синтаксис:

Синтаксис 1.0:

$( selector ).mousedown() // метод используется без параметров

$( selector ).mousedown( handler )

handler - Function( Event eventObject )

Синтаксис 1.4.3:

$( selector ).mousedown eventData, handler )

eventData - Anything

handler - Function( Event eventObject )

Обращаю Ваше внимание, что метод .mousedown(), используемый вместе с функцией, переданной в качестве параметра (handler) является, короткой записью метода .on(), а без параметра является короткой записью метода .trigger():

$( selector ).on( "mousedown", handler )

$( selector ).trigger( "mousedown" )

Добавлен в версии jQuery

Значения параметров

Пример старого кода

<button>Клик</button>
<div></div>

$(document).ready(function () {
    $('button').click(function () {
        $('div').mousedown()
    })
    $('div').mousedown(function () {
        $('div').css('background', 'green')
    })
    $('div').mouseup(function () {
        $('div').css('background', 'red')
    })
})

div {
    width: 100px;
    height: 100px;
    margin-top: 30px;
    background: yellow;
}

В этом примере с использованием jQuery метода .mousedown() мы при нажатии на элемент <button> (кнопка) вызываем событие "mousedown" на элементе <div>. Самому элементу <div> задаем, что при срабатывании события "mousedown" на элементе выполнить функцию, которая с использованием метода .css() изменяет цвет заднего фона элемента. То есть мы вызываем событие .mousedown() либо при нажатии на кнопку, либо при нажатии кнопки мыши на элементе.

Кроме того, мы задаем функцию, когда указатель мыши находится над элементом и кнопка мыши отпускается (метод .mouseup()) и элементу <div> задаем красный цвет заднего фона.

В следующем примере мы рассмотрим пример в котором в зависимости от нажатой кнопки мыши будем выводить текстовое содержимое:

<div></div>

$(document).ready(function () {
    $('div').mousedown(function (event) {
        // задаем функцию при нажатии кнопки мыши на элементе <div>
        switch (
            event.which // передаем свойсто
        ) {
            case 1: // если нажата левая кнопка (значение 1)
                $('div').text('Событие вызвано левой кнопкой мыши')
                break
            case 2: // если нажата средняя кнопка (значение 2)
                $('div').text('Событие вызвано средней кнопкой мыши')
                break
            case 3: // если нажата правая кнопка (значение 3)
                $('div').text('Событие вызвано правой кнопкой мыши')
                break
        }
    })
})

div {
    width: 200px;
    height: 200px;
    margin-top: 30px;
    background: yellow;
}

В этом примере с использованием jQuery метода .mousedown() и свойства which объекта Event мы в зависимости от нажатия определенной кнопки выводим различное текстовое содержимое. Значению 1 соответствует левая кнопка, 2 - средняя кнопка и 3 для правой кнопки.