如何在 svelte 中获取事件目标的数据属性？

Question

我想获得 data-url 的值：

  {#each profiles as p}
    <div data-url={p.url} class="item" on:click={goToPage}>
      <div class="row">
        <div class="col s12 l4">
          <div class="a">
             <br />
          </div>
        </div>
        <div class="col s12 l8">
          <p>
            <strong>{p.fn} {p.ln}</strong><br />
            {p.ttl}
          </p>
        </div>
      </div>
      {p.dsc}
       <hr />
    </div>
  {/each}

函数为：

  const goToPage = (e) => {
     var slug = e.target.querySelector("item").getAttribute("url");
    console.log("slug is:", slug);
    window.location.href = slug;
  };

但是它不起作用，我得到

Uncaught TypeError: Cannot read properties of null (reading 'getAttribute')

我尝试过其他方法，例如

e.target.querySelector("item").getAttribute("data-url");

和

e.target.getAttribute("data-url");

但其中 none 有效。

Answer 1

e.target 引用了您刚刚单击的内容，您需要使用 currentTarget 而不是 querySelector

EG:

var slug = e.currentTarget.getAttribute("data-url");

我已经做了一个基本的例子

function goToPage(e){
  console.debug(e.currentTarget.getAttribute('data-url'));
}

<div data-url="https://google.com" class="item" onClick="goToPage(event)">
      <div class="row">
        <div class="col s12 l4">
          <div class="a">
             <br />
          </div>
        </div>
        <div class="col s12 l8">
          <p>
            <strong>{p.fn} {p.ln}</strong><br />
            {p.ttl}
          </p>
        </div>
      </div>
      {p.dsc}
       <hr />
    </div>
    
    <div data-url="https://google2.com" class="item" onClick="goToPage(event)">
      <div class="row">
        <div class="col s12 l4">
          <div class="a">
             <br />
          </div>
        </div>
        <div class="col s12 l8">
          <p>
            <strong>{p.fn} {p.ln}</strong><br />
            {p.ttl}
          </p>
        </div>
      </div>
      {p.dsc}
       <hr />
    </div>

Answer 2

最简单、最直接的方法是将 slug 作为参数传递给函数：

<div data-url={p.url} class="item" on:click={() => goToPage(p.url)}>

函数变为：

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

如何在 svelte 中获取事件目标的数据属性？

How to get data attribute of event target in svelte?

javascript

svelte