Манипулирование событиями Javascript

Question

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

Работает нормально, за исключением тега <a> ... Если щелкнуть тег <a>, он подтвердит, что вам делать.Вы можете принять режим редактирования или отменить его.

Если вы принимаете режим редактирования, он изменяет содержимое <a> на <select>.Проблема возникает после этой точки: если вы нажмете на метку выбора родительского (<a>), запускается загрузка новой страницы.

Я попытался привязать событие щелчка на <a> с ложным возвратом, но в этом случае выбор не будет работать с помощью мыши.

Другой способ решить эту проблему, я думаю, это связать событие click с <select> и каким-либо образом манипулировать объектом события ...

Как это сделать?Или это неправильный подход?

ОБНОВЛЕНИЕ: базовый подход недействителен (select внутри a), но я нашел решение: удалите параметр href, и вам не нужны неприятные событиявзлом, что даже не работает в FF.(похожая проблема и ее объяснение: Выбрать тег внутри проблемы с гиперссылкой )

Answer 1

Не меняйте содержимое, меняйте элемент.Сохраните элемент a где-нибудь, замените его на select, а затем, когда вы закончите, замените обратно.Таким образом, вам не нужно беспокоиться о срабатывании ссылки.

Answer 2

function ask ( e )
{
   e.preventDefault (); //prevents default browser action
   //do whatever
}

element.addEventListener ("click", ask);

Answer 3

Базовый подход недопустим (select внутри a), но я нашел решение: удалите параметр href, и вам не понадобится ужасный взлом событий, что даже не работает в FF. (похожая проблема и ее объяснение: Выбрать тег внутри проблемы с гиперссылкой )

Answer 4

Перенос <select> в тег <a> недопустим в HTML. Кроме того, похищение обработчика события щелчка <a> для запуска объекта выбора считается уродливым хаком. Я бы порекомендовал вам поставить <select> после <a> в DOM и временно скрыть ссылку на время редактирования.

Одна вещь, которую я бы попробовал, - поиграть с методами манипулирования DOM в jQuery. Например: $('#my_select').detach().insertAfter('#my_link');

Answer 5

Вот аккуратная демонстрация

(из примера:)

$('a').click(function(event) {
     event.preventDefault();   
    $('#edit').show(500);
});

Answer 6

почему вы хотите манипулировать объектом события?Вы не можете просто оставить a-событие, чтобы вернуть false и установить другой обработчик событий для тега select?