是否向元素添加单击事件? [英] Adding a click event to an element?
本文介绍了是否向元素添加单击事件?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
如何在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);
}
});
推荐答案
您可以使用委托将侦听器添加到特定元素。它实际上使用起来相当简单。
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
的任何值
理想情况下,正如Thiem所说,您应该尽可能地利用组件。它们会给你带来更大的灵活性。但我知道在某些情况下你肯定需要这么做。这不会影响性能;事实上,它将比使用组件更快。但是,您不应该按照他的建议实现监听程序。它不会有表演性,而且非常肮脏(如他所说)。
这篇关于是否向元素添加单击事件?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文