где в поле щелкнул пользователь?

Question

У меня есть текст, отображаемый на веб-странице (скажем, в элементе span), и я добавил событие onclick и могу захватить все поле, когда пользователь щелкает его.Но мой вопрос «как я могу определить, когда это щелчок по строке?»

Answer 1

Вам нужно идентифицировать курсорПоложение

$('#text').on('click', function() {
    var cursorPos = $('#text').prop('selectionStart');
    console.log('click made after '+ cursorPos + ' characters');
});

Answer 2

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

1. Разбейте элемент span с помощью DOM-манипуляций на меньшие, каждый из которых содержит одно слово или одну буквув зависимости от того, насколько точно вы хотите, чтобы это было.Затем добавьте прослушиватели щелчков к каждому из них.

2. Если вам подходит точность слов, дайте пользователю двойной щелчок вместо щелчка, что приведет к выбору слова и посмотрите, что выбрано window.getSelection ()

3. Захватите координаты клика и предположим, что интервал имеет один и тот же шрифт с размером z px, затем высотой и ширинойкаждая буква будет больше или меньше z пикселей.

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

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

Splitting()[0].chars.forEach(charElem => {
  charElem.addEventListener("click", event => {
    console.log("clicked at", event.target.textContent, "at index", event.target.style.getPropertyValue("--char-index"));
  })
})

<script src="https://unpkg.com/splitting/dist/splitting.min.js"></script>
<span data-splitting>foobar</span>