在Svelte中如何获取事件触发目标的data自定义属性值

错误原因 #

你之前的写法存在3个核心问题：

• 类选择器语法错误：querySelector("item")是匹配<item>标签，匹配类名为item的元素需要加.前缀，正确写法是querySelector(".item")
• 事件对象属性误用：e.target指向你实际点击的最内层元素（比如内部的<p>、<strong>标签），从内层子元素向下查询.item自然返回空，调用getAttribute就会抛出空指针错误
• 属性名写错：getAttribute("url")无法匹配data-url属性，要么用getAttribute("data-url")，要么用更简便的dataset.url读取data-*属性

最优解决方案 #

直接用e.currentTarget获取绑定点击事件的元素即可，它永远指向你写了on:click的那个.item外层div，不受点击位置影响：

const goToPage = (e) => {
  const slug = e.currentTarget.dataset.url;
  console.log("slug is:", slug);
  window.location.href = slug;
};

备选方案（事件委托场景适用） #

如果需要用e.target做事件委托，可以用closest方法向上查找最近的.item元素，避免点击内层元素匹配失败的问题：

const goToPage = (e) => {
  const itemEl = e.target.closest('.item');
  // 兜底避免找不到元素的异常
  if (!itemEl) return;
  const slug = itemEl.getAttribute('data-url');
  console.log("slug is:", slug);
  window.location.href = slug;
};

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