Question

因此，我正在构建一个扩展程序，该扩展程序将一些预先做出的答案复制到剪贴板中。我在使用事件侦听器时遇到问题，我需要做出使答案有所不同的逻辑。我需要事件侦听器来识别您单击的按钮的ID。这是我的html

<div class="dropdown">
<button class="dropbtn">Retiros</button>
    <div class="dropdown-content">
        <button id="link">Clearing</button>
        <button id="bank">Invalid account</button>  
    </div>
</div>

这是我的popup.js

document.addEventListener('DOMContentLoaded', function() {
    var otra = document.getElementById('link');

    otra.addEventListener('click', function() {
        copyToClipboard();
    });
});

const copyToClipboard = str => {
    const el = document.createElement('textarea');
    el.value = 'Hola chicos, el retiro se encuentra rechazado por clearing';
    document.body.appendChild(el);
    el.select();
    document.execCommand('copy');
    document.body.removeChild(el);
};

我需要var otra来标识id而不指定它，我尝试在（）中使用event.srcelement.id，但是没有用。

任何帮助都是有用的，对我的英语不好，也对我的代码技巧很抱歉

Answer 1

遍历按钮集合，并为每个按钮添加一个侦听器。然后在处理程序this中是事件发生的元素

[].slice.call(document.querySelectorAll('.dropdown-content button')).forEach(function(el) {

  el.addEventListener('click', function(e) {
    console.log('id=', this.id);
  })
})

<div class="dropdown">
  <div class="dropdown-content">
    <button id="link">Clearing</button>
    <button id="bank">Invalid account</button>
  </div>
</div>

使用addEventListener识别Chrome扩展程序中的元素ID

1 个答案: