javascript - Dojo 防止来自子节点的 onclick 事件

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。问题很明显，我将不得不检查进入方法的项目类型，以获取我需要的信息……

1. 有什么方法可以强制执行此操作，如果我单击 ListItem 中的任意位置，该元素将成为事件的目标？

2. 如果我将处理程序连接到 ListItiem，为什么 ListItemLabel 会进入该方法？

3. 有没有办法将处理程序专门连接到 ListItem 而不是子节点？

非常感谢您!

Answer 1

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

第二个只是使用当前的点击元素上下文 (this) ，知道你必须删除 lang.hitch 函数以防止在globale 上下文(在本例中为 window 上下文)所以删除 lang.hitch 因为您没有在点击中使用它(这里不需要调用上下文)，并且this 将引用您点击的 li 元素，而 id 仅由 this.id 访问。

请参阅下面的工作片段:

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();*/
    }); 
  }
  });

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

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