如何检查仅使用类名在div中单击的链接

Question

我有这个代码。如何在div“dt-buttons”中捕获click事件并检查点击了哪个特定链接？我没有权限更改此代码，所以我想捕获这两个href的click事件来执行代码。

<div id="table_1_wrapper" class="wpDataTables wpDataTablesWrapper">
    <div class="dt-buttons">
        <a class="dt-button new_table_entry DTTT_button DTTT_button_new" tabindex="0" aria-controls="table_1" href="#"><span>New entry</span></a>
        <a class="dt-button edit_table DTTT_button DTTT_button_edit" tabindex="0" aria-controls="table_1" href="#"><span>Edit</span></a>
    </div>
</div>

我想在点击此链接时运行一些javascript代码。希望可以有人帮帮我。谢谢！

Answer 1

有多种方法可以做到这一点。它通过onclick单击链接时调用一个函数

function a()
{console.log("link clicked")}

<div id="table_1_wrapper" class="wpDataTables wpDataTablesWrapper">
    <div class="dt-buttons">
    <a class="dt-button new_table_entry DTTT_button DTTT_button_new" tabindex="0" aria-controls="table_1" href="#" onclick="a()"><span>New entry</span></a>
    </div>
</div>

使用addeventlistener

document.querySelector('.DTTT_button').addEventListener('click', function() {
  console.log("Link Clicked")
})

<div id="table_1_wrapper" class="wpDataTables wpDataTablesWrapper">
  <div class="dt-buttons">
    <a class="dt-button new_table_entry DTTT_button DTTT_button_new" tabindex="0" aria-controls="table_1" href="#"><span>New entry</span></a>
  </div>
</div>

Answer 2

您可以使用querySelector()使用来自父级和<a>标记的某些类的信息来定位元素，如下所示：

let myEle = document.querySelector("#table_1_wrapper a.dt-button");
myEle.addEventListener("click", () => console.log("clicked!"));

<div id="table_1_wrapper" class="wpDataTables wpDataTablesWrapper">
    <div class="dt-buttons">
    <a class="dt-button new_table_entry DTTT_button DTTT_button_new" tabindex="0" aria-controls="table_1" href="#"><span>New entry</span></a>
    </div>
</div>

Answer 3

你可以通过传递所有元素的类来使用Document.querySelector()，它们之间没有任何空格：

document.addEventListener("DOMContentLoaded", function(event) {
  var el = document.querySelector('.dt-button.new_table_entry.DTTT_button.DTTT_button_new');
  el.addEventListener('click', function(){
    alert('element clicked');
  });
});

<div id="table_1_wrapper" class="wpDataTables wpDataTablesWrapper">
    <div class="dt-buttons">
    <a class="dt-button new_table_entry DTTT_button DTTT_button_new" tabindex="0" aria-controls="table_1" href="#"><span>New entry</span></a>
    </div>
</div>