Sencha：如何在li元素上触发点击事件

Question

我一直无法找到如何手动触发DOM事件的方法。例如，以下是我尝试为li元素触发“click”事件的代码：

Ext.DomQuery.select('#mapRoutesPanel ol li:nth-child('+(index+1)+')')[0].click();

在Google Chrome上运行得很好，但是当我构建相同应用的Android原生应用时，它会给我错误提示。

Uncaught TypeError: Object #<HTMLLIElement> has no method 'click'

- user1812198

---

你尝试过访问 https://dev59.com/Q3HYa4cB1Zd3GeqPJD6q 吗？ - Himanshu Tyagi

Answer 1

Ext JS提供了在DOM树中搜索元素的方法。

---

看看 Sencha Fiddle - 它是一个 Sencha Touch 应用程序，我在我的安卓（opera）和 iPhone（safari）上测试过，对我有效

---

类似这样的内容：

var liElement = Ext.get('mapRoutesPanel').down('ol li:nth-child(' + (index + 1) + ')');

- Igor Semin

Answer 2

你尝试过Ext.dom.Element-method-fireEvent吗？

Ext.DomQuery.select('#mapRoutesPanel ol li:nth-child('+(index+1)+')')[0].fireEvent('click')

- Ernesto Ramírez Romero

Answer 3

并非所有的触摸设备浏览器/应用程序都支持点击事件，因为它是一个鼠标事件。为什么不尝试使用Sencha的标准化事件系统来绑定组件的点击处理程序，然后您可以在组件的点击事件处理程序中检查是否单击了<li/>。

Sencha已经为我们完成了这项工作，因此我们可以以相同的方式处理点击和轻敲，所以请利用它。

顺便说一下，从父元素进行事件委托通常比将事件处理程序绑定到许多不同的DOM元素更有效率。看起来您正在循环中绑定事件到元素，这是一种不好的做法。我只是想指出这一点。

这里是一个代码示例：

var cmp = Ext.getCmp('someComponentId');
cmp.on('click', function(me, event) {
    if (event.currentTarget.tagName == "LI") {
        // do something since the <li/> tag was clicked.
        // event.currentTarget will be the <li/> DOM element,
        // feel free to do with it as you please :)
    }
}

- macguru2000

Answer 4

在我的情况下，我按照以下方式操作。

以下是带有li的div的示例HTML代码。

<div class="menu1" id="menu1">
  <ul>
    <li id="students_tab">Students</li>
    <li id="emps_tab">Employees</li>
  </ul>
</div>

以下是添加点击事件到 li 元素的 ExtJS 代码。

<script type="text/javascript">
   Ext.onReady(function(){
     var tabs= Ext.query("li", "menu1");
     Ext.each(tabs, function(item){
         var el = Ext.get(item);
         el.on("click", function(){
            var tabName = this.id.substr(0, this.id.indexOf("_"));
            alert("U have clicked on "+ tabName + " tab");
         });
     });
  });
</script>

- Srikanth