Используйте XPath или onClick или onblur, чтобы выбрать элемент, и используйте jQuery, чтобы размыть этот элемент.

Question

* ОБНОВЛЕНИЕ: я новичок в jQuery, а также использую XPath, и я изо всех сил пытаюсь получить правильное рабочее решение, которое будет blur динамически созданным HTML element.Я подключил .onblur event (не работает должным образом) и попытался использовать $(document.activeElement), но моя реализация может быть неправильной.Я был бы признателен за любую помощь в создании рабочего решения, которое размывает это element (jqInput), когда пользователь нажимает в любом месте за пределами активного element.Я добавил HTML и jQuery/JavaScript ниже.

Некоторые идеи, которые у меня были:

(1) Используйте XPath, чтобы выбратьдинамический HTML element (jqInput), а затем используйте метод jQuery's .onClick, чтобы blur a element, когда пользователь щелкает в любом месте за пределами области XPath выбранного element.

(2) Используйте $(document.activeElement), чтобы определить, где должен запускаться .onblur:

var thisTitle = input0;

var activeElement = $(document.activeElement);

if (thisTitle != activeElement) {
    jqInput.hide();
    _layout.viewHeaderTextInput.inputOnBlurHandler(canvasObj, jqHeaderText, jqInput);
}

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

Моя задача: несколько elements активны, а .onblur не срабатывает.См. Изображение ниже:

ПРИМЕЧАНИЕ : поле <input /> содержит focus, а также <div> слева от (синий контур).Если пользователь щелкает где-либо за пределами этого <input />, blur должен применяться к этому element.

Мой код: jQuery и JavaScript

Это фрагмент кода, в котором создаются переменные jqInput и input0:

var jqInput = null;

if (jqHeaderText.next().hasClass("inline-editable"))
{
    //Use existing input if it already exists 
    jqInput = jqHeaderText.next();
}
else
{
    //Creaet a new editable header text input
    jqInput = $("<input class=\"inline-editable\" type=\"text\"/>").insertAfter(jqHeaderText);
}

var input0 = jqInput.get(0);

//Assign key down event for the input when user preses enter to complete entering of the text
input0.onkeydown = function (e)
{
    if (e.keyCode === 13)
    {
        jqInput.trigger("blur");
        e.preventDefault();
        e.stopPropagation();
    }
};

Это мой .onblur event и мой помощник methodblur element:

input0.onblur = function ()
{
    _layout.viewHeaderTextInput.inputOnBlurHandler(canvasObj, jqHeaderText, jqInput);
};

inputOnBlurHandler: function (canvasObj, jqHeaderText, jqInput)
{
    // Hide input textbox 
    jqInput.hide();

    // Store the value in the canvas
    canvasObj.headingText = jqInput.val();

    _layout.updateCanvasControlProperty(canvasObj.instanceid, "Title", canvasObj.headingText, canvasObj.headingText);

    // Show header element
    jqHeaderText.show(); 

    _layout.$propertiesContent.find(".propertyGridEditWrapper").filter(function ()
    {
        return $(this).data("propertyName") === "Title";
    }).find("input[type=text]").val(canvasObj.headingText); // Update the property grid title input element
}

Я пытался использовать активный элемент, но я не думаю, что реализация верна:

var thisTitle = input0;

var activeElement = $(document.activeElement);

if (thisTitle != activeElement) {
    jqInput.hide();
    _layout.viewHeaderTextInput.inputOnBlurHandler(canvasObj, jqHeaderText, jqInput);
}

Мой HTML-код:

<div class="panel-header-c">
        <div class="panel-header-wrapper">
            <div class="panel-header-text" style="display: none;">(Enter View Title)</div><input class="inline-editable" type="text" style="display: block;"><div class="panel-header-controls">
                <a href="javascript:;" class="collapse-vertical" tabindex="0"><span></span></a>
            </div>
        </div>
</div>

Благодарю всех вас заранее.