时间戳

首页 > 解决方案 > 使用事件处理程序包装器获取按钮的 html 内容

javascript - 使用事件处理程序包装器获取按钮的 html 内容

问题描述

我正在使用包装器将事件处理程序附加到页面上的某些按钮。使用以下代码，我可以在单击每个按钮时获取按钮 ID。但是，我需要获取 pre 标签的内容并将两个 div 的内容连接起来，以便在单击每个按钮时创建一个命令。

有人可以帮忙吗。

const wrapper = document.getElementById('wrapper');

wrapper.addEventListener('click', (event) => {
var parent=event.target.parentElement;

console.log(parent.getElementsByTagName('pre')[0].innerHTML);


  const isButton = event.target.nodeName === 'BUTTON';
  if (!isButton) {
    return;
  }
  
})
<div id="wrapper">

    <div class="command">
        <p>description 1</p>
        <div>
            <pre><div>kubectl&nbsp;</div><div>create cluster</div></pre>
        </div>
        <button id="button1" class="demo-button-small">Run</button>
    </div>

    <div class="command">
        <p>description 2</p>
        <div>
            <pre><div>kubectl&nbsp;</div><div>delete cluster</div></pre>
        </div>
        <button id="button2" class="demo-button-small">Run</button>
    </div>

    <div class="command">
        <p>description 3</p>
        <div>
            <pre><div>kubectl&nbsp;</div><div>list cluster</div></pre>
        </div>
        <button id="button3" class="demo-button-small">Run</button>
    </div>

</div>

标签： javascripthtmlevent-handling

解决方案

用于.closest()查找包含的 DIV，然后用于.querySelector()查找其中的<pre>标签并获取其innerText.

const wrapper = document.getElementById('wrapper');

wrapper.addEventListener('click', (event) => {
  const isButton = event.target.nodeName === 'BUTTON';
  if (!isButton) {
    return;
  }
  const div = event.target.closest("div.command");
  if (div) {
    const pre = div.querySelector("pre");
    if (pre) {
      console.log(pre.innerText);
    }
  }
})
<div id="wrapper">

  <div class="command">
    <p>description 1</p>
    <div>
      <pre><div>kubectl&nbsp;</div><div>create cluster</div></pre>
    </div>
    <button id="button1" class="demo-button-small">Run</button>
  </div>

  <div class="command">
    <p>description 2</p>
    <div>
      <pre><div>kubectl&nbsp;</div><div>delete cluster</div></pre>
    </div>
    <button id="button2" class="demo-button-small">Run</button>
  </div>

  <div class="command">
    <p>description 3</p>
    <div>
      <pre><div>kubectl&nbsp;</div><div>list cluster</div></pre>
    </div>
    <button id="button3" class="demo-button-small">Run</button>
  </div>

</div>

推荐阅读