使用图像作为按钮的Vaadin 8。不触发单击事件

我正在为自己构建一个Vaadin 8应用程序。我正在使用设计器生成UI。我在仪表板上添加了几个按钮，单击这些按钮应该会触发一个功能。由于某些原因，单击图像时不会触发任何内容。下面是所有涉及的代码。有人能看出我做错了什么吗

这是.html文件中的代码：

<vaadin-horizontal-layout responsive width-full margin>
    **<vaadin-image icon="theme://images/properties.png" style-name="my-image-button" responsive alt="" _id="imagePropertyInfo"></vaadin-image>**
    <vaadin-image icon="theme://images/occupants.png" responsive alt="" _id="imageOccupants"></vaadin-image>
    <vaadin-image icon="theme://images/vendors.png" responsive alt="" _id="imageVendors"></vaadin-image>
   </vaadin-horizontal-layout>

这是SCS .我的图像按钮 { 光标：指针； }

以下是来自仪表板UI的代码 公共仪表板HomeView OnCalui OnCalui { this.oncalui=oncalui

        // Make it disabled until a property is selected
        **imagePropertyInfo.setEnabled( false );
        imagePropertyInfo.setStyleName( "my-image-button" );**
        fetchPropertyBasicInfo();
    }

    protected void fetchPropertyBasicInfo()
    {
        List<PropertyProfileBasic> listOfPropertyProfiles = new ArrayList<PropertyProfileBasic>( OnCallUI.myStarService.fetchAllPropertyProfileBasicInformation() );
        comboBoxGeneric.setCaption( "Select a Property" );
        comboBoxGeneric.setItemCaptionGenerator( aProperty -> aProperty.toString() );
        comboBoxGeneric.setItems( listOfPropertyProfiles );
        comboBoxGeneric.addValueChangeListener( event -> fetchOccupantBasicInfo( event ) );
        comboBoxGeneric.focus();
    }

    protected void fetchOccupantBasicInfo( ValueChangeEvent<PropertyProfileBasic> event )
    {
        // Fetch all the occupants for the selected property
        if( event.getValue().getPropertyNo() != null )
        {
            //  Fetch a list of occupant basic info for the selected property
            List<OccupantProfileBasic> listOfOccupantProfiles = new ArrayList<OccupantProfileBasic>( OnCallUI.myStarService.fetchOccupantProfileBasicByPropertyNo( event.getValue().getPropertyNo() ) );
            //  Clear the existing grid et al
            gridContainer.removeAllComponents();
            //  Add the occupant grid
            occupantGrid = new OccupantProfileBasicGrid( listOfOccupantProfiles );
            //  Show the grid
            gridContainer.addComponents( new Label( "Occupants" ), occupantGrid );

            //  Set the dashboard buttons to enabled now a property is selected
            **imagePropertyInfo.setEnabled( true );
            // Add the property info button
            imagePropertyInfo.addClickListener( e -> fetchPropertyInformation() );**
        }
    }

    protected void fetchPropertyInformation()
    {
        Notification.show( "Yo!", "You clicked!", Notification.Type.HUMANIZED_MESSAGE );
    }

---

我假设您使用的是GridLayout。我推荐另一种方法。使用Button，并将按钮样式设置为无边框。显然，您希望这样。按钮的图标可以是来自主题的图像，使用meresource。伪代码如下：

ThemeResource icon = new ThemeResource("/images/properties.png");
Button imagePropertyInfo = new Button(icon);
imagePropertyInfo.setStyleName(ValoTheme.BUTTON_BORDERLESS);
imagePropertyInfo.addClickListener( e -> fetchPropertyInformation() );

另外请注意，Image组件的JavaDoc说

公共注册添加ClickListenerMouseeEvents.ClickListener侦听器 向组件添加单击侦听器。每当用户在组件内部单击时，都会调用该侦听器。根据内容的不同，事件可能会被阻止，在这种情况下不会触发任何事件

我认为它不喜欢你不使用资源就用主题设置图像的方式

如果要删除按钮的焦点突出显示，可以通过以下CSS规则：

.v-button-link:after {
  content: none;
}

---

另外值得一提的是，图像不可聚焦，而按钮可聚焦。这意味着即使图像可以有单击侦听器，键盘导航也无法到达，按钮可聚焦，可以通过选项卡等方式到达。因此，使用按钮而不是图像可以使应用程序更容易访问。

这实际上是一个页面上的三个图像在网格中…我使用Vaadin designer作为UI，因此它生成html和java文件。我以前确实使用过一个按钮，但当我点击它时，它看起来很糟糕，它在图像下方有一个奇怪的框。难道不可能在图像中添加一个单击侦听器吗？这应该是一个非常基本的想法。我找到了它。我更改了main样式名称从v按钮改为无边框。唯一令人不快的是，当禁用v按钮时，它不会像v按钮那样显示为灰色。但是，v按钮在图像上显示了一个丑陋的矩形。我尝试将无边框添加为其他样式名称，但没有帮助。@Bitwyse1感谢您的评论，我改进了我的答案以解决这些问题。