当通过叠加曲面显示textarea时触发模糊事件的原因

Question

嗨我正在使用primefaces 5.1和jsf 2.2

我正面临这个问题，当我显示一个叠加时包含的textArea时，会触发textarea blur事件，稍后当我点击时会再次触发blur事件，就像应该这样。

这是我为每个显示所有叠加组件的人

<p:panel id="results" widgetVar="wresults">
<h:graphicImage id="docImage" styleClass="imageDocument"
                    value="file/#{documentController.file.nameFileRepository}?#{documentController.getCoordenades()}"
                    style="width: 100%; ">
</h:graphicImage>

<c:forEach items="#{documentController.file.anotationList}" var="a">

    <p:panel id="anotation_#{a.id}" widgetVar="anotation_#{a.id}"   
         style="background: transparent; border:none; padding: 0px; width: 4%; height:2%; top:#{a.top}px; left:#{a.left}px; position: absolute;">
        <p:graphicImage id="img_#{a.id}" name="images/anotation.png"    style="width: 100%; height:100%;" />
    </p:panel>


    <p:overlayPanel id="imagePanel_#{a.id}" for="img_#{a.id}"  hideEffect="fade" appendToBody="true">
        <p:inputTextarea id="tarea_#{a.id}" rows="5" cols="30" value="#{a.text}">
            <p:ajax event="blur" oncomplete="modifyJS('anotation_#{a.id}')" process="@this" />
        </p:inputTextarea>
    </p:overlayPanel>

    <p:draggable for="anotation_#{a.id}" opacity="0.3" containment="parent" />
</c:forEach>
</p:panel>

这是在点击其中一个<p:graphicImage>

后在屏幕上查看的方式

当我加载或调整页面大小时，我有两个Java Scipt监听器获取窗口大小并绘制所有“蓝眼睛”<p:panel id="anotation_#{a.id}" >

这些是听众

$(window).resize(function() {
clearTimeout(id);

setTimeout(function() {
    paint()
}, 300);

});

$(document).ready(function() {
setTimeout(function() {
    paint()
}, 300);
});

这是功能画

function paint() {

var x = window.innerWidth;
var y = Number($('.imageDocument').css("height").replace(/[^0-9\.]+/g, ""));
paintAnotations([{name : 'sizeX',value : x}, {name : 'sizeY',value : y  } ]);
}

I m thinking that the problem is in the paintAnotations method, paintAnotations is a remote comand who calls the managed bean and the method in the managed bean updates`

远程命令

<p:remoteCommand name="paintAnotations" actionListener="{#documentController.paintAnotations}"></p:remoteCommand>

托管bean中的方法

public void paintAnotations() {

   //Set new size for the items

    RequestContext context = RequestContext.getCurrentInstance();
    context.update("form:results");
}

最后，这是捕捉模糊事件的方法

function modifyJS(idHtml) {

console.log("blur event");
//other stuff

}

此gif显示行为

PD：如果我更改textarea值，我无法使用jquery获取新值，或者托管bean就像永远不会更改。

我尝试了什么：

*通过showEvent =“mouseover”更改叠加事件，但模糊被调用的次数更多。

*不要在repintar方法（在托管bean中）之后刷新屏幕，但是当我调整元素大小时不会改变它们的大小，这是必要的。

*删除叠加面板这是有效的，但我需要使用叠加面板显示textarea

提前感谢你的时间和答案