单击事件以在列表中 div 在 iPad 上不起作用

Question

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

煎茶小提琴示例：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

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

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

希望这有帮助。

Answer 2

原因是"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
                 }
        }]
 ...