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

Posted 2023-02-16

【中文标题】Dojo 防止来自子节点的 onclick 事件

【英文标题】：Dojo Prevent onclick events from children nodes

【发布时间】：2017-11-24 15:39:18

【问题描述】：

我以编程方式创建了一个 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 而不是子节点？

提前非常感谢您！

【问题讨论】：

你想要当你点击 li 时总是得到它的 ID 吗？

是的。这将类似于....我希望 li 的子项触发其父项（即 li）的单击事件。我一直在谷歌上搜索，但道场的例子并不多..

看我下面的答案

【参考方案1】：

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

第二种只是使用当前点击元素上下文（this），知道你必须删除lang.hitch函数以防止在全局上下文中执行事件（window上下文在这种情况下）所以删除 lang.hitch 因为你没有在点击中使用它（这里不需要调用上下文），this 将引用你点击的 li 元素，id 只是由 this.id 访问。

见下文 worknig sn-p ：

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>