Question

我已经以编程方式创建了一个如下的ul：

var paneaux= dojo.byId("personsListPane");

var list = new dojox.mobile.RoundRectList({
    id: 'personsList',
    select:"single",
}).placeAt(paneaux).startup();

var listaux=dojo.byId("personsList");

for (var i = 0, len = persons.length; i < len; i++){
    var person= persons[i];
    var li = new dojox.mobile.ListItem({
        id:person.IdPerson,
        label: person.Surname + " " + person.Surname2 + ", " + person.Name,
        clickable : true,
    }, domConstruct.create("li", {}, listaux));

    li.startup();

    on(li, "click",  lang.hitch(this, function(evt){
        li= evt.target;
        var person = gpt._sessionData.userPersons.filter(function(obj){
            return obj.IdPerson==li.id;
        });                         
        gpt._sessionData.defaultPersonEmployee =person[0];
        initImpl();
    }));  
}

其中给出了以下html结果：

<li class="mblListItem mblListItemUnchecked" tabindex="0" id="1vxki6w6vb8uihiu9crhocy3e" widgetid="1vxki6w6vb8uihiu9crhocy3e" aria-selected="false" role="button">
    <div class="mblListItemRightIcon">
       <div title="" class="mblDomButtonArrow mblDomButton">
         <div> </div>
       </div>
    </div>
    <div class="mblListItemLabel">López Ibarra, Alberto</div>
</li>

问题如下：当我点击该人的姓名时，它进入我用on（..）创建的事件，但事件目标不是ListItem，而是ListItemLabel。但是，标签略小于项目，当我单击ListItem的小可访问空间时，event.target是ListItem。问题很明显，我必须检查输入方法的项目类型，以获取我需要的信息......

有没有办法强迫它，如果我点击ListItem中的任何地方，这是将成为事件目标的元素？
如果我将处理程序连接到ListItiem，为什么ListItemLabel正在输入该方法？
有没有办法将处理程序专门连接到ListItem而不是子节点？

提前多多谢谢!!

Answer 1

你有两种可能性，第一种是比较event.target是否等于你的li元素，如果是，则直接获取id，否则获取目标父级并访问li id。

第二个是使用当前单击元素上下文（this），知道您必须删除lang.hitch函数以防止在globale上下文中执行事件（window这种情况下的上下文）因此，请删除lang.hitch，因为您未在点击内使用它（此处无需调用上下文），this将引用您点击的li }元素和id只是由this.id加入。

见下面的worknig片段：

＆＃13;

require(["dojo/ready","dojo/dom","dojo/dom-construct","dojo/on","dojo/_base/lang","dojox/mobile/parser", "dojox/mobile/Icon", "dojox/mobile/RoundRectList", "dojox/mobile/ListItem"], function (ready, dom, domConstruct, on, lang, parser, Icon, RoundRectList, ListItem) {
  var paneaux = dom.byId("personsListPane");
  var list = new RoundRectList({
      id: 'personsList',
      select:"single",
  }).placeAt(paneaux).startup();
	
  var listaux = dom.byId("personsList");
  for (var i = 1, len = 5; i < len; i++) {
    //var person= persons[i];
    var li = new dojox.mobile.ListItem({
        id:i,
        label: "Surname" + i,
        clickable : true,
    }, domConstruct.create("li", {}, listaux));

    li.startup();
		
    on(li, "click", function(evt){
      console.log("Id of clicked = "+ this.id);
      /*var person = gpt._sessionData.userPersons.filter(function(obj){
        return obj.IdPerson==li.id;
      });                         
      gpt._sessionData.defaultPersonEmployee =person[0];
      initImpl();*/
    }); 
  }
  });

＆＃13;

.as-console-wrapper {
  max-height: 65px !important;
}

＆＃13;

<link href="https://ajax.googleapis.com/ajax/libs/dojo/1.9.0/dojox//mobile/themes/iphone/iphone.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<div id="personsListPane"></div>

＆＃13;

Dojo防止来自子节点

1 个答案: