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

Question

我一直无法弄清楚如何手动触发 DOM 事件。例如，这里是我尝试为 li 触发“click”事件

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

它在谷歌浏览器上运行良好，但是当我构建同一应用程序的 android 本机应用程序时，它给了我错误

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

Answer 1

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

---

看看 Sencha Fiddle - 它的 sencha touch 应用程序，我在我的 android(opera) 和 iphone(safari) 上测试了它对我的工作

---

像这样的东西：

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

Answer 2

并非所有触摸设备浏览器/应用程序都支持单击事件，因为它是鼠标事件。为什么不尝试使用 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 :)
    }
}

Answer 3

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

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

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>