1

我将 html 添加到 Sencha 列表行，onClick 在 Windows 上的 Chrome 和 Safari 上运行良好，但点击事件在 iPad 上不起作用。请让我知道在 iPad 上制作示例的任何建议。

Sencha Fiddle 示例： http ://www.senchafiddle.com/#MadlC#SPOJb#psFLV

代码：

var store = Ext.create('Ext.data.Store', {
    fields: ['htmlRow'],
    autoLoad: true,
});

store.add([{ "htmlRow": "<div onclick='func_click1();' style='background:gray;width:70px;float:left'>Click 1</div><div onclick='func_click2()' style='background:yellow;width:70px;float:left'>Click 2</div>" }]);
store.add([{ "htmlRow": "Edt"}]);
store.add([{ "htmlRow": "Jamie"}]);
store.add([{ "htmlRow": "Aaron"}]);
store.add([{ "htmlRow": "Dave"}]);
store.add([{ "htmlRow": "Michael"}]);
store.add([{ "htmlRow": "Abraham"}]);
store.add([{ "htmlRow": "Jay"}]);

//define the application
Ext.application({

    launch: function() {

        Ext.Viewport.add({

            width: '100%',
            height: '100%',

            centered: true,
            hideOnMaskTap: false,

            layout: 'fit',

            items: [{
                xtype: 'list',
                disableSelection:true,  

                itemTpl: '<strong>{htmlRow}</strong>',
                store: store
            }]
        });
    }
});

function func_click1(){
    alert("Why This Click 1 Working on Safari and Google Chrome in Windows, But Not Working on Ipad !");
}
function func_click2(){
    alert("Why This Click 2 Working on Safari and Google Chrome in Windows, But Not Working on Ipad !");
}
4

2 回答 2

1

原因是“onclick”不能与点击输入设备（我的意思是触摸设备）一起使用，因为它是为点击而设计的，正如名称所述。

当您的列表中的一行被触摸时，获取反馈的正确（ST2）方法是收听列表的“itemtap”事件：

...
items: [{
            xtype: 'list',
            disableSelection:true,  

            itemTpl: '<strong>{htmlRow}</strong>',
            store: store,
            listeners: {
                 itemtap : function(list, index, target, record, event) {
                     // your code here
                 }
        }]
 ...
于 2012-05-09T16:59:23.743 回答
1

在 'itemtap' 事件中，您可以检查 'event' 参数以确定您的列表项的哪个区域被点击。在您的情况下，您可以执行以下操作：

  • 1）在第一行的两个 div 中添加一个 id：

    store.add([{ "htmlRow": " <div id='area1' onclick='func_click1();' style='background:gray;width:70px;float:left'>Click 1</div><div id='area2' onclick='func_click2()' style='background:yellow;width:70px;float:left'>Click 2</div>"}]);

  • 2）在itemtap监听器中：

    itemtap : function(list, index, target, record, event) {
    console.log(event.target.id);
    if (event.target.id=='area1') {
        alert('area1 clicked!');
    }
    if (event.target.id=='area1') {
        alert('area2 clicked!');
    }
}

请注意，如果您需要，“事件”参数中还有更多信息。

希望这可以帮助。

于 2012-05-10T06:48:45.987 回答