extjs ext js modern toolkit中的click delegate的等价物是什么？

7gcisfzg 于 2022-11-04 发布在其他

关注(0)|答案(1)|浏览(128)

我想在带有图像的容器上添加导航按钮，这样用户就可以导航到上一个或下一个图像。

{
    xtype: 'container',
    height: 400,
    width: 600,
    html: '<div id="ux-image-viewer-image">' +
               '<img src="https://elcl6.coe.int/slider/photo2.jpg">' +
                '<div id="ux-image-viewer-hoverNav" style="visibility: visible;">
                    <div id="ux-image-viewer-navPrev" style="visibility: visible;"><span>&lt;</span></div>
                    <div id="ux-image-viewer-navNext" style="visibility: visible;"><span>&gt;</span></div>' +
                '</div>' +                      
          '</div>',
}

如何检测到特定div被点击？
通过与经典工具包的类比，我尝试添加tap侦听器，如：

listeners: {
    el: {
      delegate: 'div.ux-image-viewer-hoverNav',
      tap: function() {
            console.log('Clicked!');
        }
    }
}

但是，那不起作用。

extjs

来源：https://stackoverflow.com/questions/67850051/what-is-the-equivalent-of-click-delegate-in-ext-js-modern-toolkit

1条答案

按热度按时间

mspsb9vt1#

您可以使用下列程式码：

{
    xtype: 'container',
    height: 400,
    width: 600,
    html: '<div id="ux-image-viewer-image" style="border: 1px solid red;">' +
            '<img src="https://elcl6.coe.int/slider/photo2.jpg">' +
            '<div id="ux-image-viewer-hoverNav" style="visibility: visible;">' +
                '<div id="ux-image-viewer-navPrev" style="visibility: visible;">' +
                    '<span> &lt; </span>' +
                '</div>' +
                '<div id="ux-image-viewer-navNext" style="visibility: visible;">' +
                    '<span>&gt;</span>' + 
                '</div> ' +
            '</div>' +
        '</div>',
    listeners: {
        tap: {
            element: 'element',
            delegate: 'div#ux-image-viewer-hoverNav',
            fn: function() {
                console.log('click el');
            }
        }
    }
}

赞(0）回复(0）举报 2022-11-04

我来回答

extjs ext js modern toolkit中的click delegate的等价物是什么？

1条答案

相关问题

热门标签

最新问答