Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 31.07.2014, 11:40
Новичок на форуме
Отправить личное сообщение для Yefim Посмотреть профиль Найти все сообщения от Yefim
 
Регистрация: 31.07.2014
Сообщений: 2

Как узнать по какой букве кликнула мышь
Известно, что узнать координаты в пикселях, где был сделан клик - не проблема. А вот как узнать по какой букве кликнула мышь?
Спасибо.
Ответить с цитированием
  #2 (permalink)  
Старый 31.07.2014, 11:56
Аватар для MallSerg
Профессор
Отправить личное сообщение для MallSerg Посмотреть профиль Найти все сообщения от MallSerg
 
Регистрация: 07.03.2011
Сообщений: 1,126

<!Doctype html>
<html>
<head>
    <meta charset="utf-8">
	<style>
	*{cursor:pointer}
	</style>
</head>
<body>
<div id="first">Известно, что узнать координаты в пикселях, где был сделан клик - не проблема. А вот как узнать по какой букве кликнула мышь?
Спасибо.</div>
<script type="text/javascript">
	var f = document.getElementById ("first"); 
	var str = f.innerText;
	var	newhtml = "";
	for ( var i = 0 ; i < str.length; i++) {
			newhtml += "<a>"+str[i]+"</a>";
		}
	f.innerHTML = newhtml;
	f.onclick = function (e){
		alert( "кликнули на букве \"" +e.target.innerText+ "\"" );
	}
</script>
</body>
</html>
Ответить с цитированием
  #3 (permalink)  
Старый 31.07.2014, 13:16
Отправить личное сообщение для Octane Посмотреть профиль Найти все сообщения от Octane  
Регистрация: 10.07.2008
Сообщений: 3,873

Как вариант, чтобы не создавать элемент для каждой буквы, можно попробовать брать смещение схлопнутого выделения по mouseup и смотреть какой символ стоит на этой позиции. Только в Chrome как-то херово работает.
<!DOCTYPE html>
<html lang="en">
<head>
    <title>…</title>
    <meta charset="UTF-8">
    <style>
        body {
            font-size: 200%;
        }
    </style>
</head>
<body>
    <div class="text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
    <script>
    document.querySelector('.text').addEventListener('mouseup', function (event) {
        var text = event.target.firstChild.nodeValue,
            range = window.getSelection().getRangeAt(0),
            startIndex = range.startOffset;
        if (navigator.userAgent.indexOf('Firefox') != -1) {
            startIndex = Math.max(startIndex - 1, 0);
        }
        alert(text.substr(startIndex, 1));
    });
    </script>
</body>
</html>


Или еще можно попробовать в цикле изменять смещение инстанса Range и сравнивать его координаты (getBoundingClientRect) с координатами клика.

Последний раз редактировалось Octane, 31.07.2014 в 13:20.
Ответить с цитированием
  #4 (permalink)  
Старый 31.07.2014, 13:38
Новичок на форуме
Отправить личное сообщение для Yefim Посмотреть профиль Найти все сообщения от Yefim
 
Регистрация: 31.07.2014
Сообщений: 2

Большое спасибо!!!
Большое спасибо!!! Все работает!
Ответить с цитированием
  #5 (permalink)  
Старый 01.08.2014, 00:45
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,480

В ff можно проще:
<script>
window.addEventListener('click', function(event){
  if(event.explicitOriginalTarget.nodeType === 3) alert( event.rangeParent.data.charAt(event.rangeOffset) );
}, false)
</script>
<p>Сумасше́ствие (также устар. безу́мие) — потенциально неизлечимое тяжёлое психическое расстройство.</p>
<p>До конца XIX века сумасшествием или безумием считалось поведение или мышление, выходившее за рамки принятой социальной нормы, как например болезненные судороги, галлюцинации при полном сохранении рассудка, странные или саморазрушающие действия, а также попытки самоубийства. Кроме того, приступы эпилепсии, контузии и последствия черепно-мозговых травм также считались проявлением безумия.</p>
__________________
29375, 35

Последний раз редактировалось Aetae, 01.08.2014 в 00:48.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Вопрос по jquery - как узнать какой тэг? APL Общие вопросы Javascript 7 09.06.2016 15:22
Всплытие событий или что то не так... Кирюха =) jQuery 6 30.03.2013 12:56
Как узнать какой скрипт вызывается при клике по эленету (если это прямо не прописано) Dmitriy Komar Events/DOM/Window 4 08.12.2011 17:21
Массивы. Как узнать ключ, зная значение? jsuse Общие вопросы Javascript 4 24.11.2011 19:03
Как узнать подключен ли JavaScript у пользователя? frost18 Элементы интерфейса 1 26.10.2011 17:16