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

Posted 2023-02-26

【中文标题】Sencha：如何在 li 元素上触发点击事件

【英文标题】：Sencha: How to trigger click event on li element

【发布时间】：2013-06-07 11:48:56

【问题描述】：

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

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

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

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

【问题讨论】：

你试过***.com/questions/16145882/…吗？

【参考方案1】：

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

---

Look Sencha Fiddle - its sencha touch app, i tested it on my android(opera) and iphone(safari) its work for me

---

类似这样的：

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

【参考方案2】：

你试过了吗 Ext.dom.Element-method-fireEvent?

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

【参考方案3】：

并非所有触摸设备浏览器/应用程序都支持单击事件，因为它是鼠标事件。为什么不尝试使用 Sencha 的规范化事件系统将点击处理程序绑定到组件，然后您可以检查

是否在组件的点击事件处理程序中被点击。

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 :)
    

【参考方案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>