单击使用 Dojo 时如何获取父级 div？

Question

我正在动态创建一个 div 对象，然后根据用户查询的数据向其附加 spans。

我正在使用 on(featureDiv, "click", featureClicked);

然后我有：

function featureClicked(result) {
    console.log(result);
}

我遇到的问题是 returns span 对象（如果单击的是该对象）。但是，我只想获得 div，因为我放置了一个我需要访问的唯一 ID，以便在另一个查询中使用，具体取决于用户选择的 div。

如何使用 on 始终使用 div 对象而不是 span 对象？

Answer 1

你需要了解这里的点击事件是如何工作的。当事件已附加到父元素并且事件从子元素触发时，event.target 属性将 return 触发事件的元素。 event.currentTarget 属性将 return 附加事件的元素，即父元素。

因此，要获取 div 元素，您必须访问 event.currentTarget 属性。

引用自this blog post：

event.target is the node from which the event originated, ie. wherever you place your event listener (on  or ), event.target refers to node (where user clicked)

event.currentTarget, on the opposite, refers to the node on which current-event listener was attached. Ie. if we attached our event listener on  node, then event.currentTarget refers to  while event.target still refers to .

Answer 2

如@Himanshu 所述，将点击事件附加到您的 div 时，

要获取附加事件的元素，您必须使用 event.currentTarget、

因此，如果您单击跨度，event.target 将引用当前单击的节点（跨度），而 event.currentTarget 将引用 div（其中活动已附加）。

请参阅下面的工作示例：

require(["dojo/dom-construct", "dojo/dom", "dojo/on", "dojo/parser", "dojo/ready"], function(domConstruct, dom, On, parser, ready) {
  ready(function() {
      var elment = domConstruct.create('div', {
        'id': 'myDivId'
      }, "container");

      var span1 = domConstruct.create('span', {
        'id': 'myspan1',
        'innerHTML': 'span 1<br>'
      },);
      var span2 = domConstruct.create('span', {
        'id': 'myspan2',
        'innerHTML': 'span 2<br>'
      },);


      domConstruct.place(span1, elment , "last");
      domConstruct.place(span2, elment , "last");

      
      On(elment, "click", function (evt) {
          console.log("click target elemnt id is : ",evt.target.id);
          console.log("click parent currentTarget : ",evt.currentTarget.id);
          dom.byId("event").innerHTML = "click on : "+evt.target.id+" event attached on :"+evt.currentTarget.id;
      });
    
  });
});

#myDivId {
  border:1px dotted black;
}

<script type="text/javascript">
  dojoConfig = {
    isDebug: true,
    async: true,
    parseOnLoad: true
  }
</script>

<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<link href="//ajax.googleapis.com/ajax/libs/dojo/1.8.3/dijit/themes/claro/claro.css" rel="stylesheet" />
<div id="container"></div>

<strong><div id="event" style="color:green"></div></strong>

单击使用 Dojo 时如何获取父级 div？

How to get the parent div when using Dojo on click?

javascript

dojo

attributes

click