javascript - 单击图像时如何将鼠标坐标传递给支持 bean

Question

当用户单击图像时，我尝试了各种方法将鼠标坐标获取到支持 bean 中。我可以在javascript中获取坐标，然后调用ajax监听器，但参数不在请求中。

我的js:

if (!cis) var cis = {}
if (!cis.sarwinds) {
  var focusLostTimeout
  cis.sarwinds = {   
    errorHandler: function(data) { 
      alert("Error occurred during Ajax call: " + data.description) 

    },

    updateZoomValues: function(input, event) { 



       jsf.ajax.addOnError(cis.sarwinds.errorHandler)
          var offset = jQuery(input).offset();       

          jsf.ajax.request(input, event, { 
             render: "imagePan2 message",
             x: event.pageX - offset.left,
             y: event.pageY - offset.top
          })
    },

    getGraphicImageId: function(input) {
      var clientId = new String(input.name)
      var lastIndex = clientId.lastIndexOf(":")
      return clientId.substring(0, lastIndex) + ":imagePan2"
    }
  } 
}

我的 jsf 页面元素:

    <h:graphicImage id="imagePan2" library="images" styleClass="wind_map" name="testImage.jpg" style="#{SarWindsImagesBean.imageStyle('testImage.jpg')}">
           <f:ajax event="click" onevent="cis.sarwinds.updateZoomValues(this, event)" listener="#{SarWindsImagesBean.zoomInClick}" render="imagePan2 message"/>
    </h:graphicImage>

我的支持 bean:

    public void zoomInClick(AjaxBehaviorEvent event) {
    double width;
    double height;
    double top;
    double left;
    double mouseX;
    double mouseY;
    String fileName = "testImage";


    Map<String, String> reqParams = FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap();
    mouseX = Double.parseDouble(reqParams.get("x"));
    mouseY = Double.parseDouble(reqParams.get("y"));


    width = imageItems.get(fileName).getImageWidth() * 1.1;
    height = imageItems.get(fileName).getImageHeight() * 1.1;

    // We need the mouse position on the image here, and we need to calculate
    top = mouseY - ((mouseY - imageItems.get(fileName).getImageTop()) * 1.1);
    left = mouseX - ((mouseX - imageItems.get(fileName).getImageLeft()) * 1.1);

    if (this.imageLock == false){

        imageItems.put(fileName, new SarWindImageItem(width, height, top, left));
    } else {
        Iterator<String> it = imageItems.keySet().iterator();
        while (it.hasNext()) {

                String key = (String)it.next();

                imageItems.put(key, new SarWindImageItem(width, height, top, left));
            }
    }
}

reqParams 为空。

丹

Answer 1

您使用的方式jsf.ajax.request()并不完全正确。 <f:ajax>已经创建了一个，但是您在其 onevent 中嵌套了另一个 (请注意，onevent 被调用三次；在请求发送之前、响应到达之后以及 HTML DOM 更新之后)。这是不对的。

从技术上讲，您应该调用jsf.ajax.request()在 onclick属性并删除 <f:ajax>共。然而，这基本上需要替换 <h:graphicImage>由自制UIComponent decode()中的请求参数收集工作由它完成方法，以便可以正确更新适当的模型值。

忘记使用jsf.ajax.request()独立的。仅当您真正开发自定义时才应使用它 UIComponent其中您在 decode() 中执行所需的后处理.

普通 HTML 提供 <input type="image" name="foo">为此，坐标将作为 foo.x 发送和foo.y参数。这适用于 JSF <h:commandButton image="some.png">但是，当您使用 <f:ajax> 时，不会发送这些特殊参数。 。所以忘记这个吧。

最好的选择是使用所需的坐标设置隐藏的输入值，然后以通常的方式将这些隐藏的输入绑定(bind)到托管 bean 属性。

例如

<h:form>
    <h:graphicImage id="image" name="image1.png">
        <f:ajax event="click" execute="x y" listener="#{bean.listener}" />
    </h:graphicImage>
    <h:inputHidden id="x" value="#{bean.x}" />
    <h:inputHidden id="y" value="#{bean.y}" />
</h:form>

<h:outputScript>
    jQuery("img[id$=':image']").on("mousedown", function(event) {
        var $form = jQuery(this).closest("form");
        $form.find("input[id$=':x']").val(event.pageX);
        $form.find("input[id$=':y']").val(event.pageY);
    });
</h:outputScript>

(注意:jQuery.on() 仅自 1.7 起可用，如果您使用的是旧版本，请改用 jQuery.bind())

与

@ManagedBean
@RequestScoped
public class Bean {

    private Integer x;
    private Integer y;

    public void listener() {
        System.out.println(x + ", " + y);
    }

    // ...
}

请注意，我还修复了您获取鼠标位置的错误方法。您只是返回了图像元素本身的位置，而不是鼠标指针在其上的位置。