如何获取最后一次点击元素的data-url属性值？

有三个带data-url属性和data-click类的<a>标签，多次点击这些标签后，点击id为log的元素时，希望控制台只输出最后一次点击元素的data-url值，而不是所有点击过的对应值。

原代码的问题在于：每次点击data-click按钮时，都会给log元素新增一个点击事件监听器，导致点击log时，所有之前绑定的事件都会触发，进而输出所有历史点击的data-url。

核心思路是用一个变量存储最后一次点击的data-url，并且只给log绑定一次点击事件，避免重复绑定导致的多次输出。

方案一：使用全局变量存储 #

// 初始化变量保存最后一次点击的data-url
let lastClickedUrl = '';

// 点击data-click按钮时更新变量
$('.data-click').on('click', function() {
  lastClickedUrl = $(this).attr('data-url');
});

// 给log绑定一次点击事件，输出最后一次的url
$('#log').on('click', function() {
  console.log(lastClickedUrl);
});

方案二：用元素的data属性存储（无全局变量） #

如果不想用全局变量，可以把最后一次的url存在log元素自身的data属性里：

$('.data-click').on('click', function() {
  // 将最后一次的data-url存入log元素的data属性
  $('#log').data('lastUrl', $(this).attr('data-url'));
});

$('#log').on('click', function() {
  // 从log元素的data属性中取出值输出
  console.log($(this).data('lastUrl'));
});

对应的HTML代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<a data-url="1" href="#!" class="data-click">aaa</a>
<a data-url="2" href="#!" class="data-click">aaa</a>
<a data-url="3" href="#!" class="data-click">aaa</a>

<a href="#!" id="log">log</a>

为什么这样有效？ #

• 方案一通过全局变量记录最后一次的点击值，log的点击事件只绑定一次，触发时直接读取这个变量的最新值。
• 方案二把数据直接关联到log元素上，避免了全局变量的使用，逻辑更紧凑，同样只绑定一次log的点击事件。

内容的提问来源于stack exchange，提问作者hossein ghodrati