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>

如何检查仅在类名称中的div中单击了什么链接

3 个答案: