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

Question

我正在使用包装器将事件处理程序附加到页面上的某些按钮。使用以下代码，我可以在单击每个按钮时获取按钮 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>

Answer 1

使用.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>

Answer 2

如果你得到按钮 ID，试试这个

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

wrapper.addEventListener('click', (event) => {
  const isButton = event.target.nodeName === 'BUTTON';
  if (!isButton) {
    return;
  }
  let button = document.getElementById(event.target.id)
  text = button.parentNode.children[1].children[0].innerHTML
  console.log(text)
})

Answer 3

获取父元素，然后获取父元素内的pre标签

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>

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

Getting html content for buttons using an event handler wrapper

html

javascript

event-handling