向元素添加点击事件？

Posted 2023-02-25

【中文标题】向元素添加点击事件？

【英文标题】：Adding a click event to an element?

【发布时间】：2012-04-24 13:19:28

【问题描述】：

如何在 ST2 应用程序中将点击事件分配给任意范围 (eg. <span id="foo">foo</span>)？

我有一个简单的例子来说明我想做的事情。在示例中，我写了字母A,B,C，我想告诉用户他们点击了哪个字母。

这是一张图片：

---

代码片段

Ext.application(

    launch: function() 
        var view = Ext.create('Ext.Container', 

            layout: 
                type: 'vbox'
            ,
            items: [
                html: '<span id="let_a">A</span>  <span id="let_b">B</span> <span style="float:right" id="let_c">C</span>',
                style: 'background-color: #c9c9c9;font-size: 48px;',
                flex: 1
            ]
        );
        Ext.Viewport.add(view);
    
);

【问题讨论】：

谢谢，但是如果您有多个具有唯一 ID 的自定义组件，该怎么办？我有来自我的商店的具有唯一 ID 的缩略图，我试图将其传递给弹出窗口。我肯定不想为每个缩略图 id 设置多个侦听器吗？

【参考方案1】：

您可以使用委托将侦听器添加到特定元素。它实际上使用起来相当简单。

Ext.Viewport.add(
    html: 'test <span class="one">one</span> hmmm <span class="two">two</span>',
    listeners: [
        
            element: 'element',
            delegate: 'span.one',
            event: 'tap',
            fn: function() 
                console.log('One!');
            
        ,
        
            element: 'element',
            delegate: 'span.two',
            event: 'tap',
            fn: function() 
                console.log('Two!');
            
        
    ]
);

主要部分是element和delegate。

element 在几乎所有情况下都将具有 element 的值，除非您正在使用带有自定义模板的自定义组件。 delegate 是一个简单的 CSS 选择器。所以它可以是从span 到span .test.second 的任何东西

理想情况下，正如蒂姆所说，您应该尽可能地利用组件。他们会给你更多的灵活性。但我知道在某些情况下你肯定需要这样做。不会对性能产生影响；事实上，它会比使用组件更快。但是，您应该绝不按照他建议的方式实现侦听器。它不会高效并且非常脏（正如他所提到的）。

【讨论】：

我可以在同一个 html 中处理多个 ：就像在我的示例中一样？

太棒了 - 谢谢你的回答。 Sencha 的文档可以使用更多示例来说明在其组件和控件中呈现的标准模型之外使用 Ext/Touch 的能力。

@rdougan 我们可以使用 id 代替 class，因为我的课程是动态的，我尝试了 span.id 它对我不起作用

@rdougan 如何从 span 传递值给听众。

@sur007 调用监听器fn 时传递的第一个参数是事件。该对象有一个目标属性，即单击的跨度。