Всех друзей поздравляем с Новым годом! Всего вам самого наилучшего! Всех благ, здоровья а материальное приложится!
СКРИПТЫ alt htmlcssphpjsblog

Отследить двойной клик кнопки мыши по блоку javascript

Поддержи проект!!! smile

ondblclick javascript или "Отследить двойной клик кнопки мыши по блоку javascript", сколько способов существует определить/отследить двойной клик кнопки мыши по блоку/элементу Dom-а в javascript.

Подробно о "ondblclick Event"

  1. Использование "ondblclick" внутри тега.
  2. Использование ondblclick + function
  3. Пример использования dblclick + addEventListener
  4. Скачать можно здесь
  1. Использование "ondblclick" внутри тега.

    Одним из способов использования ondblclick - размещение "ondblclick" внутри тега.

    Для того, чтобы продемонстрировать использование "ondblclick" нам понадобится элемент Dom - пусть это будет div, и добавим ему class="ondblclick" :

    Также туда добавим событие "ondblclick" с функцией myFunction:

    <div ondblclick="myFunction(event)" class="ondblclick"></div>
    Css:

    Немного стилей для нашего блока:

    .ondblclick{
    background: #e9e9e9;
    width: 300px;
    height: 100px;
    margin: auto;
    border: 1px solid;
    }
    javascript

    Напишем нашу функцию:

    <script>
    function myFunction() {
    document.getElementById("demo").innerHTML = "Вы дважды кликнули по блоку";
    }
    </script>

    Результат использования ondblclick в теге:

    Будем передавать - пусть это будет текст в отдельный div "Получаем".

    Наведите мышку на блок:

    Получаем

  2. Использование ondblclick + function

    Второй способ использования ondblclick равно function.

    Нам опять понадобится div, внутрь добавим id, чтобы обратиться к тегу

    <div id="theDIV" class="ondblclick"></div>

    В абзац "p" будем передавать полученные данные:

    <p id="demo_1"></p>

    Стили повторять не буду - см. выше.

    Соберем скрипт:

    <script>

    document.getElementById("theDIV").ondblclick = function(e) {

    document.getElementById("demo_1").innerHTML = "Вы дважды кликнули по блоку";

    };

    </script>

    Результат ondblclick + function

    Проведите мышкой по блоку:

    Получаем

  3. Пример использования dblclick + addEventListener

    Следующий вариант использования ondblclick, аналогичен первому, только здесь будем использовать dblclick + "addEventListener":

    Html:

    <div id="theDIV_2" class="ondblclick"></div>

    <p id="demo_2"></p>

    Css:

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

    javascript

    <script>

    document.getElementById("theDIV_2").addEventListener("dblclick", function(e) {

    document.getElementById("demo_2").innerHTML = "Вы дважды кликнули по блоку";

    });

    </script>

    Результат ondblclick + addEventListener

    Получаем


Последняя дата редактирования : 06.02.2021 20:50
Название скрипта :Функция ondblclick
Скрипт № 62.10Ссылка на скачивание : Все скрипты на одной странице
//dwweb.ru/comments_1_5/include/img/hand_no_foto.png
no
no
Еще никто не прокомментировал! COMMENTS+   BBcode
аватар
🞨
Загрузить свой аватар
(max ширина, высота = 200px)

Подписаться + =
Теги:
ondblclickjs ondblclick document ondblclickсобытие ondblclickondblclick eventondblclick javascript что означает событие ondblclick

Счетчик в график :

Построение гравиков
Основа для графика : счетчик посещаемости.
Последние комментарии :
Марат :
29/04/2021 01:46
Реанимирована страница о "шаблонах в DREAMWEAVER"!Эта программа была основной для редактирования моих сайтов на…
подробнее.
Марат :
23/04/2021 04:35
Страница обновлена - добавлен скрипт - всё в одном. Скачивание картинку по…
подробнее.
Марат :
13/04/2021 08:12
Во-первых пожалуйста!1). $new_array - был прописан оттого, что контент на сайте пишется на живых примерах. И часто…
подробнее.
Валерий :
13/04/2021 05:47
перебрал весь материал- во первых спасибоискал другое но понравился Ваш материалerror - или неточность 1. везде…
подробнее.
Марат :
08/04/2021 07:12
Сам афигеваю!
подробнее.