如何在 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);
}
});
最佳答案
您可以使用委托(delegate)将监听器添加到特定元素。它实际上使用起来相当简单。
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
理想情况下,如 蒂姆 说,你应该尽可能地利用组件。他们会给你更多的灵 active 。但我知道在某些情况下你肯定需要这样做。不会对性能产生影响;事实上,它会比使用组件更快。但是,您应该 从不按照他建议的方式实现听众。它不会高效并且非常脏(正如他所提到的)。
关于sencha-touch-2 - 向元素添加点击事件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10298683/