С Новым годом! Форум программистов, компьютерный форум, киберфорум
JavaScript
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.83/6: Рейтинг темы: голосов - 6, средняя оценка - 4.83
 Аватар для Teamur
29 / 29 / 5
Регистрация: 06.01.2015
Сообщений: 336

Поддерживать нажатое состояние кнопки/клавиши. Как это сделать?

31.01.2016, 12:50. Показов 1320. Ответов 8
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Нужно сделать так, чтобы по нажатию на элемент сработало событие mousedown, а mouseup было проигнорировано!

Принцип действия:
1) Нажатие на ЭЛЕМЕНТ -> сдвиг вниз (см. <style> );
2) Нажатие вне элемента -> возвращение в исходное состояние;

ПРИМЕР:
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!doctype html>
<meta charset='utf-8'>
<title>EXAMPLE</title>
<div id='box'>
  <div id='el'>ЭЛЕМЕНТ</div>
</div>
<style>
  body {
    display: flex;
    margin: 0;
    height: 100vh;
    background: #56bddc;
  }
  #box {
    width: 200px;
    height: 100px;
    margin: auto;
    background: #fff;
  }
  #el {
    font-size: 30px;
    text-align: center;
    cursor: pointer;
    background: #ffe6cc;
    -webkit-user-select: none;
    -moz-user-select: none;
  }
  #el:hover { background: #fece9a; }
  #el:active { transform: translate(0, 10px); }
</style>
Если добавить СКРИПТ:
JavaScript
1
2
3
el.onmouseover = function() {
  el.click();
}
То НАЖАТИЕ все равно не происходит.
Хотя тут работает: http://www.w3schools.com/jsref... html_click
Есть ли что-то вроде: el.mousedown()?

Использование mouseup.preventDefault() не помогло решить задачу.
Если программно сгенерировать событие mousedown (типа new Event ...), то кнопка визуально не нажмется, верно?
Объясните, пожалуйста, можно ли зафиксировать кнопку в нажатом состоянии, работая лишь с событиями мыши.
И просьба, если не знаете, не говорите, что это невозможно. )
Спасибо.

Добавлено через 18 минут
Вот еще по отмене mouseup, если я не ошибаюсь:
http://stackoverflow.com/quest... nt-handler

Добавлено через 17 часов 17 минут
31.01.2016

Добавлено через 3 часа 58 минут
Ни ответа ни привета!
0
Programming
Эксперт
39485 / 9562 / 3019
Регистрация: 12.04.2006
Сообщений: 41,671
Блог
31.01.2016, 12:50
Ответы с готовыми решениями:

Оставить нажатое состояние кнопки при клике
Не могу найти по всему инету простую вещь - как оставить нажатое состояние кнопки при клике - скажем она меняет картинку на ON , при...

Как сделать подсветку текста, и привязки кнопки к определенный клавиши клавиатуры?
Как сделать подцветку текста, и привязки кнопки к определенный клавиши клавиатуры? например Enter?

Скоро только Windows 10 будет поддерживать новое железо, это как?
Привет всем.Вот постепенно собираю своего монстра.Собираюсь взять либо 6700к либо 5960х в январе прочел новость что мелкие перестанут...

8
 Аватар для YakobsEA
268 / 96 / 75
Регистрация: 04.12.2015
Сообщений: 369
Записей в блоге: 1
31.01.2016, 16:14
Можно ещё так попробовать (не факт, что сработает для кнопки):
JavaScript
1
2
3
4
5
// element  - элемент по которому кликаю
       element.onclick = function () {
       //Здесь мой код, он работает исправно
          return false;
        };
И вот ещё с использованием jQuery: http://javascript.ru/forum/jqu... ytijj.html
0
 Аватар для Teamur
29 / 29 / 5
Регистрация: 06.01.2015
Сообщений: 336
31.01.2016, 19:03  [ТС]
В jQuery я вообще не работал. Мне нужно отключить mouseup только лишь для того, чтобы облегчить выделение текста. Скажем есть contenteditable div. Я делаю клик в начале выделения и в конце. И всё - и не надо удерживать кнопку мыши. Просто нажал левую кнопку мыши (ЛКМ) и отпустил, далее - отводя мышь я буду видеть как увеличивается синяя область выделения текста. Затем второй клик и текст выделен.
Считаю что это будет очень удобно в тех случаях когда вам нужно выделить большой фрагмент текста в огромной статье скажем. Просто не удобно одновременно удерживать ЛКМ да еще скролить!
Нужно видеть что выделяешь, а именно видеть как синяя область выделения движется за курсором после первого клика, начавшего его
Вот и все, что мне нужно. И никто не может дать внятного ответа. Можно ли временно отключить событие mouseup после первого клика, чтобы без удержания ЛКМ, выделить текст. Второй клик, завершающий выделение, отключит функцию блокировки mouseup. Вот и всё! Я уже незнаю как объяснить, чтобы было понятно.
Вооот! Такие дела ...)))
0
 Аватар для YakobsEA
268 / 96 / 75
Регистрация: 04.12.2015
Сообщений: 369
Записей в блоге: 1
31.01.2016, 19:18
Хм... Так Вам нужно не обработчик подавлять, а событие. Либо, как вариант имитировать событие mousedown по mouseup. А как это сделать нужно подумать. Сейчас не могу - через 15 минут еду в аэропорт, а от туда... на Камчатку. Так что если никто не успеет вам ответить, то попробую Вам помочь... не раньше 2-го числа.
0
 Аватар для Teamur
29 / 29 / 5
Регистрация: 06.01.2015
Сообщений: 336
31.01.2016, 19:40  [ТС]
YakobsEA, именно. Я не против подождать. Буду продолжать поиски. А вам удачи на Камчатке. )))

Итак, дорогие форумчане, продолжаем дискуссию...
0
 Аватар для YakobsEA
268 / 96 / 75
Регистрация: 04.12.2015
Сообщений: 369
Записей в блоге: 1
02.02.2016, 13:43
Боюсь, что порадовать особенно не чем.
Похоже поставленная задача выходит за рамки возможностей JS (по крайней мере на сегодняшний день).
Пока единственное, что в голову приходит - создать COM-объект и через него мышкой управлять, но это решение подходит только для Windows-патформ, да и не красиво, придётся пользователя заставлять что-то там устанавливать... Я бы скорее всего на его месте не стал бы этого делать. В общем овчинка выделки не стоит.
Глубоко проблемой не занимался и ближайшие две недели не смогу.
Пока я бы рекомендовал подумать над альтернативным подходом. Например, кнопками "Выделить абзац", "Выделить главу", "Выделить всё" и т.д..
Но если кто-то что-то придумает - было бы очень интересно (для меня - с академической точки зрения).
1
23 / 23 / 11
Регистрация: 28.02.2015
Сообщений: 61
02.02.2016, 16:19
Вашу задумку c увеличением области выделения по мере движения мыши с незажатой кнопкой, не сильно вдаваясь в детали, можно реализовать так:
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
"use strict";
 
var areaState = 'NULL';
 
var startPoint = {};
 
document.onclick = function(e) {
  if (areaState == 'NULL') {
    areaState = 'MOVE';
    startPoint.x = e.clientX;
    startPoint.y = e.clientY;
 
    el.style.position = 'absolute';
    el.style.top = startPoint.y + 'px';
    el.style.left = startPoint.x + 'px';
    el.className = 'moving';
 
    return false;
  } 
 
  if (areaState == 'MOVE') {
    setTimeout(function() {
      areaState = 'WAIT';
    }, 0);
  }
 
  if (areaState == 'WAIT') {
    el.style.width = 0;
    el.style.height = 0;
    areaState = 'NULL';
  } 
}
 
document.onmousemove = function(e) {
  if ( areaState != 'MOVE' ) {
    return false;
  }
  el.style.width = e.clientX - startPoint.x + 'px';
  el.style.height = e.clientY - startPoint.y + 'px';
}
А вот, чтобы сделать только выделение текста в этой области, нужно уже будет немного попотеть.
1
 Аватар для Teamur
29 / 29 / 5
Регистрация: 06.01.2015
Сообщений: 336
03.02.2016, 18:40  [ТС]
YakobsEA,
Цитата Сообщение от YakobsEA Посмотреть сообщение
не красиво, придётся пользователя заставлять что-то там устанавливать...
СОГЛАСЕН.

jade, Хитро! Спасибо.
Скорее всего здесь будет два слоя.
1) Слой с текстом
Тогда, наверное придется получать позицию каретки (смещение в символах), потом скажем запустить предложенную вами функцию и, наконец, по второму клику получить конечное положение каретки и сохранить в буфер для дальнейшего использования.
2) Слой с рамкой выделения.
Примерно так я себе это представляю, но вот реализовать в коде вряд ли смогу.
Вот этим можно получить позицию каретки:
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function getCaret(element) {
  var caretOffset = 0;
    if (typeof window.getSelection != 'undefined') {
      var range = sel.getRangeAt(0);
      var preCaretRange = range.cloneRange();
      preCaretRange.selectNodeContents(element);
      preCaretRange.setEnd(range.endContainer, range.endOffset);
      caretOffset = preCaretRange.toString().length;
    }
    return caretOffset;
}
 
function showCaretPos() {
  var el = document.getElementById('parent');
  out.innerHTML = 'Caret position: ' + getCaret(el);
}
Думаю может пригодится. И то этот код написал не я.

Есть и альтернативная идея:
Если узнать (даже примерно) ширину символа (для упрощения пусть это будет моноширинный Consolas) мы можем при сдвиге курсора по горизонтали добавлять нужное количество символов в созданное выделение (что-то вроде selection.addRange()).
Если же курсор движется по вертикали, то зная высоту строки, можно добавлять целые строки в выделение.
Как-то так..

Добавлено через 22 часа 38 минут
Но естественно требуется доработка
0
 Аватар для Teamur
29 / 29 / 5
Регистрация: 06.01.2015
Сообщений: 336
05.02.2016, 16:49  [ТС]
5 февраля 2016 ...
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
inter-admin
Эксперт
29715 / 6470 / 2152
Регистрация: 06.03.2009
Сообщений: 28,500
Блог
05.02.2016, 16:49
Помогаю со студенческими работами здесь

При нажатии клавиши I проверить и вывести на экран состояние клавиши Insert
Добрый день, помогите с заданием при нажатии клавиши I проверить и вывести на экран состояние клавиши Insert очень далек от...

При нажатии клавиши «I» проверить и вывести состояние клавиши insert
Написать программу : при нажатии клавиши «I» проверить и вывести состояние клавиши insert Добавлено через 7 минут при нажатии...

Создать новый пункт списка с нумерацией по нажатию кнопки, как это сделать?
Напишите скрипт, который по нажатию кнопки создаёт новый пункт списка с нумерацией, например, «Новый элемент 1», «Новый элемент 2» и так...

Как вернуться в состояние до нажатия кнопки?
Подскажите как мне вернуться в состояние ДО нажатие кнопки... Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As...

Как узнать состояние нажатой радио кнопки
Как узнать состояние нажатой радио кнопки


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
9
Ответ Создать тему
Новые блоги и статьи
Учёным и волонтёрам проекта «Einstein@home» удалось обнаружить четыре гамма-лучевых пульсара в джете Млечного Пути
Programma_Boinc 01.01.2026
Учёным и волонтёрам проекта «Einstein@home» удалось обнаружить четыре гамма-лучевых пульсара в джете Млечного Пути Сочетание глобально распределённой вычислительной мощности и инновационных. . .
Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост.
Programma_Boinc 28.12.2025
Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / **********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / **********/ gallery/ bKBkQFf Пост отсюда. . .
Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США.
Programma_Boinc 26.12.2025
Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .
Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка.
Programma_Boinc 23.12.2025
Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .
PhpStorm 2025.3: WSL Terminal всегда стартует в ~
and_y87 14.12.2025
PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .
Как объединить две одинаковые БД Access с разными данными
VikBal 11.12.2025
Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.
Новый ноутбук
volvo 07.12.2025
Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro
Музыка, написанная Искусственным Интеллектом
volvo 04.12.2025
Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .
От async/await к виртуальным потокам в Python
IndentationError 23.11.2025
Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .
Поиск "дружественных имён" СОМ портов
Argus19 22.11.2025
Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru