javascript - 获取链接函数中单击元素的数据属性

Question

在如下场景中如何在控制台中获取imgt:

function test(e){
let tg = e.target.attr('data-tg');
console.log(tg); // error - target is undefined
}

$('button').on('click', function(e){
let fn = $(this).attr('data-fn');
window[fn]();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button data-tg='imgt' data-fn='test'>CLICK</button>

Answer 1

就其本身而言，e.target 只是一个元素，无法具有 .attr() 函数。这应该显示在您的控制台中。

此外，您不向该函数传递任何参数。考虑以下因素。

function test(e) {
  if (e == undefined) {
    console.log("Event is Undefined");
    return false;
  }
  let tg = $(e.target).data('tg');
  console.log(tg); // error - target is undefined
}

$("#btn-1").on('click', function(event) {
  let fn = $(this).data('fn');
  window[fn](event);
});
$("#btn-2").on('click', function(event) {
  let fn = $(this).data('fn');
  window[fn]();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="btn-1" data-tg='imgt' data-fn='test'>Test 1</button><button id="btn-2" data-tg='imgt' data-fn='test'>Test 2</button>