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有时会在此部分中返回元素，而不是该部分本身。那么解决方案是什么？

我当前的解决方案（我不喜欢）是我从path获得了属性composedPath或event，它是元素数组，然后遍历直到找到标签名称为section的元素。

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>

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
}

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>

或者，如果您只想获取源代码部分，则只需将this传递给该函数。

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>

Answer 4

您可以使用this作为参数，并且可以使用“ 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");
}

Answer 5

您可以检查类或单击它的任何特定属性

function (event){

const ele = event.target; }

使用Javascript单击时捕获元素（具有单击事件绑定的元素）

5 个答案: