时间戳

首页 > 解决方案 > 使用 addEventListener 在 chrome 扩展中识别元素的 id

javascript - 使用 addEventListener 在 chrome 扩展中识别元素的 id

问题描述

所以我正在构建一个扩展，将一些预先制作的答案复制到剪贴板。我在使用事件侦听器时遇到问题，我需要制定一个逻辑来区分答案。我需要事件侦听器来识别您单击的按钮的 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 但没有用。

任何帮助都会很有用，对不起我糟糕的英语和糟糕的代码技能

标签： javascriptjqueryhtmlgoogle-chrome-extension

解决方案

循环按钮集合并为每个按钮添加一个侦听器。然后在处理程序内部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>

推荐阅读