Question

我动态创建div对象，然后根据用户查询中的数据向其添加spans。

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

然后我有：

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

我遇到的问题是，如果该对象被点击了，则会返回span个对象。但是，我只想获取div，因为我根据用户选择的div放置了我需要访问的唯一ID以用于其他查询。

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

Answer 1

您需要了解点击事件在此处的工作方式。当事件附加到父元素并且事件从子元素触发时，event.target属性将返回触发事件的元素。并且event.currentTarget属性将返回附加了事件的元素，即父元素。

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

引自this blog post：

event.target是事件发起的节点，即。无论您在何处放置事件监听器（或），event.target都指节点（用户点击的位置）



event.currentTarget，相反，指的是附加当前事件侦听器的节点。 IE浏览器。如果我们在节点上附加了事件监听器，则event.currentTarget引用，而event.target仍然引用。

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？

2 个答案: