如何在使用Dojo on click时获得父div?

vxqlmq5t  于 2022-12-16  发布在  Dojo
关注(0)|答案(2)|浏览(208)

我动态地创建了一个div对象,然后根据用户查询中的数据将spans追加到该对象中。
我使用的是on(featureDiv, "click", featureClicked);
然后我有:

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

字符串
我遇到的问题是,如果点击了span对象,它将返回span对象。但是,我只想获得div,因为我放置了一个唯一的ID,根据用户选择的div,我需要访问该ID以在另一个查询中使用。
如何使用on始终使用div对象而不是span对象?

xurqigkl

xurqigkl1#

如@Himanshu所述,当把click事件附加到div时,
要获取事件所附加的元素,必须使用event.currentTarget
因此,如果您单击span,event.target将引用当前单击的节点(span),而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>
wfsdck30

wfsdck302#

您需要了解click事件在这里是如何工作的。当一个事件被附加到父元素并且该事件从子元素触发时,event.target属性将返回触发该事件的元素。而event.currentTarget属性将返回附加了该事件的元素,即父元素。
因此,要获取div元素,必须访问event.currentTarget属性。
引用自this blog post

  • event.target是事件起源的节点,即无论您将事件侦听器放在何处(在<p><span>上),event.target都指向节点(用户单击的位置)
  • 相反,event.currentTarget指的是当前事件监听器所连接的节点。即,如果我们将事件监听器连接到<p>节点上,则event.currentTarget指的是<p>,而event.target仍然指的是<span>

相关问题