使用JavaScript在单击时捕获已绑定单击事件的元素（即具有单击事件绑定的元素）。

Question

想象一下这个简单的html代码：

<section onclick="dosomething(event)">
    <div slot="header" class="collapse-header">
      <div class="collapse-image"></div>
      <div class="collapse-text-price-container">
        <div class="collapse-text">სასაჩუქრე ბარათი 200 ლარი – ტანსაცმლის მაღაზია ZURA & SHARK</div>
        <div minprice="1200"></div>
      </div>
      <div class="center-item-container">
        <div class="status success-status">წაღებული</div>
      </div>
      <div class="center-item-container">
        <div class="date-text">10 იან, 2018</div>
      </div>
      <div class="center-item-container">
        <iron-icon class="icon" icon="bog:chevron-down"></iron-icon>
      </div>
    </div>
    <div slot="body" class="collapse-body">
      <div>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.</div>
    </div>
  </section>

请注意代码的这一部分：onclick="dosomething(event)"。正如您所看到的，我在外部<section>标记内拥有许多其他元素。我还有许多类似的部分，并且在单击时，我想获取单击的确切节元素。我该怎么办？event.srcElement有时会返回此部分内的元素，而不是部分本身。那么解决方案是什么？

我的当前解决方案（我不喜欢）是从event中获取属性path或composedPath，它是元素数组，并且我迭代它，直到我找到具有section标签名称的元素。

- O. Shekriladze

---

1. .srcElement是由Microsoft在其全局event对象中引入的专有属性。"标准化"的方法是使用.addEventListener()，它将一个Event对象作为第一个参数传递给注册的事件处理程序。然后使用标准化的target属性。
2. 查看Element.closest()。

- Andreas

Answer 1

你可以使用event.target，并从事件中传递this以获取源元素：

function dosomething(event, source) {
  console.log(source.tagName);
  event.target.classList.add('red');
}

.red {
  color: red;
}

<section onclick="dosomething(event, this)">
  <div slot="header" class="collapse-header">
    <div class="collapse-image"></div>
    <div class="collapse-text-price-container">
      <div class="collapse-text">სასაჩუქრე ბარათი 200 ლარი – ტანსაცმლის მაღაზია ZURA & SHARK</div>
      <div minprice="1200"></div>
    </div>
    <div class="center-item-container">
      <div class="status success-status">წაღებული</div>
    </div>
    <div class="center-item-container">
      <div class="date-text">10 იან, 2018</div>
    </div>
    <div class="center-item-container">
      <iron-icon class="icon" icon="bog:chevron-down"></iron-icon>
    </div>
  </div>
  <div slot="body" class="collapse-body">
    <div>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.</div>
  </div>
</section>

- shrys

Answer 2

尝试像这样更改函数调用行：

<section onclick="dosomething(this, event)">

然后是函数：

function dosomething(me, e) {
    console.log(me); // returns the section, which was clicked
    console.log(e.target); // returns the element, which was clicked
}

- Guga Nemsitsveridze

Answer 3

你可以使用event.target。最初的回答。

function dosomething(event) {
  console.log(event.target)
}

<section onclick="dosomething(event)">
    <div slot="header" class="collapse-header">
      <div class="collapse-image"></div>
      <div class="collapse-text-price-container">
        <div class="collapse-text">სასაჩუქრე ბარათი 200 ლარი – ტანსაცმლის მაღაზია ZURA & SHARK</div>
        <div minprice="1200"></div>
      </div>
      <div class="center-item-container">
        <div class="status success-status">წაღებული</div>
      </div>
      <div class="center-item-container">
        <div class="date-text">10 იან, 2018</div>
      </div>
      <div class="center-item-container">
        <iron-icon class="icon" icon="bog:chevron-down"></iron-icon>
      </div>
    </div>
    <div slot="body" class="collapse-body">
      <div>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.</div>
    </div>
  </section>

Or if you just want to get the source section, you just need to pass this to the function.

function dosomething(section) {
  console.log(section)
}

<section onclick="dosomething(this)">
    <div slot="header" class="collapse-header">
      <div class="collapse-image"></div>
      <div class="collapse-text-price-container">
        <div class="collapse-text">სასაჩუქრე ბარათი 200 ლარი – ტანსაცმლის მაღაზია ZURA & SHARK</div>
        <div minprice="1200"></div>
      </div>
      <div class="center-item-container">
        <div class="status success-status">წაღებული</div>
      </div>
      <div class="center-item-container">
        <div class="date-text">10 იან, 2018</div>
      </div>
      <div class="center-item-container">
        <iron-icon class="icon" icon="bog:chevron-down"></iron-icon>
      </div>
    </div>
    <div slot="body" class="collapse-body">
      <div>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.</div>
    </div>
  </section>

- Cuong Le Ngoc

---

我想要获取被点击的确切章节元素... event.srcElement 有时会返回此章节内部的元素，而不是章节本身。 - Andreas

Answer 4

你可以将此作为参数，然后使用“this”获取所有子元素。 例如 将下面的HTML文本更改为：

变成

并且在JavaScript中可以这样做：

function dosomething(event,this) 
{
    var _this = this; // get section element
    var _elem = event.target // get self element
    var childElements = _this.childNodes; //get child elements

    /* if you are using jQuery do like this */
    var xxxElem = $(_this).find(".xxx");
}

- Bojan

Answer 5

您可以检查被点击的类或任何特定属性

function (event){

const ele = event.target; }

- Rahul Rana

---

那是一条注释而不是答案。 - Andreas