Question

我将html添加到Sencha列表行，onClick在Chrome＆amp; Windows上的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 !");
}

Answer 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
                 }
        }]
 ...

Answer 2

在“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!');
    }
}

请注意，如果需要，'event'参数中有更多信息。

希望这有帮助。

点击事件到div列表不在ipad上工作

2 个答案: