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 的那个小的可访问 space 时，event.target 就是 ListItem。问题很明显，我将不得不检查进入方法的项目类型，以通过某种方式获取我需要的信息...

有什么方法可以强制执行此操作，如果我单击 ListItem 中的任意位置，该元素将成为事件的目标？
如果我将处理程序连接到 ListItiem，为什么 ListItemLabel 会进入该方法？
有没有办法将处理程序专门连接到 ListItem 而不是子节点？？

非常感谢您！！

Answer 1

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

第二种只是使用当前点击元素上下文 (this) ，知道你必须删除 lang.hitch 函数以防止在全局上下文中执行事件 ( window context in this case ) 所以删除 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>

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

Dojo Prevent onclick events from children nodes

javascript

events

dojo

event-delegation

dojox.mobile