Почему при нажатии рядом с текстом, активируется поле «contenteditable»?

Question

[Aski_io]

У меня есть тестовый шаблон с которым нужно работать, в нем есть редактируемые поля с "contenteditable".
При нажатии рядом с текстом, т.е. не на текст, а где-то рядом (пример на GIF), оно активируется, хотя не должно.
Как это можно починить, подскажите пожалуйста.
Думал поможет overflow: hidden, но к сожалению не помог :(
JSFiddle
GIF

Answer 1

[M-ka]

Не пользовался этой либой но есть предположение:
1. событие установлено на блок, в который заворачивается абзац
2. т.к. абзац заворачивается в блочный тег, см п.1, то по условиях работы блочного элемента, видимой областью на которую установлено событие, является весь блок целиком...

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

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

Comments

[Aski_io]

Я нашел решение, сделал текст изначально не редактируемым (contenteditable="false"), только при клике на текст, блоку задавался (contenteditable="true") и фокус на текст, после задал в blur опять (contenteditable="false"), после таких махинаций, проблема исчезла) всё равно спасибо что ответили!)

this.$spans
        .on('click', function () {
            $(this).attr('contenteditable', 'true')
            $(this).focus()
        })
        .on('focus', function () {
            var span = $(this)
            if (span.text() == span.data('text'))
            {
                setTimeout(function () {
                    span.text('')
                    span.addClass('writeField')
                    //span.next().show()
                }, 100)
            }
        })
        .on('blur', function () {
            var span = $(this)
            $(this).attr('contenteditable', 'false')
            if (span.text().length <= 1)
            {
                span.removeClass('writeField')
                span.next().hide()
                span.text(span.data('text'))
            }
        })