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树中的搜索元素提供了它的方法。

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) + ')');

Answer 2

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

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

Answer 3

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

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 4

我的情况如下所示。

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

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

以下是将click事件添加到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>

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

4 个答案: