Как определить позицию щелчка мыши в jquery

Question

Как определить позицию щелчка мыши в jquery

0

Я пытаюсь создать сайт, на котором пользователь может опубликовать статью. Я хочу, чтобы они разрешили некоторые теги html. Но поскольку пользователь может не знать о html, я использую некоторую кнопку для автоматической вставки содержимого, чтобы они могли добавить некоторый эффект к их контенту. Например, если какой-либо пользователь хочет написать какой-либо полужирный текст, он может нажать кнопку "жирный шрифт", и код будет автоматически вставлен. Ниже приводится образ моего проекта.

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

Итак, есть ли способ обнаружить позицию щелчка мыши и добавить текст сразу после этого? Любое предложение (я использую jQuery)?

user2958359 18 дек. 2013, в 00:25

Источник

Теги:

javascript

jquery

click

mouse

blink

2 ответа

Ещё вопросы

Captain John · Answer 1 · 2013-12-17T20-00-00.000Z

В событии щелчка мыши вы можете использовать переменные clientX и clientY для поиска точек щелчка мыши. Это можно сделать следующим образом:

$("#myButton").click(function(e) {
    alert(e.clientX + ", "+ e.clientY);
})

надеюсь, это поможет

Я думаю, что это просто дает координаты. Можно ли добавить текст сразу после щелчка мышью?
Хорошо. Что вы используете для текстового контейнера? Предположим, вы не используете текстовую область?

Zac · Answer 2 · 2013-12-17T21-10-00.000Z

Если вы не используете textarea, и я предполагаю, что вы уже разместили область (пример: content_node) как:

content_node.designMode="on";
content_node.contentEditable= true;

Затем вам просто нужно использовать [document.execCommand], например:

document.execCommand("FontSize","false",sSize|iSize);
document.execCommand("Bold","false",null);

Дальнейшее чтение: https://developer.mozilla.org/en-US/docs/Web/API/document.execCommand