关于vue 和react 中的hash与锚点冲突问题

Posted 2022-05-30 l8l8

  // 可以利用事件委托进行处理hash和锚点的冲突问题。
  // 
  handleAnchorClick(e)
    if (e.target && e.target.tagName.toLowerCase() === ‘a‘) 
      // 确定点击元素是不是a元素；
      // Determine whether the click element is a element;
      const href = e.target.href;
      // 确定你的锚点href
      const regx = /#锚点名字\/.+/g;
       // 指定符合你锚点的正则表达式
      //  Specify regular expressions that match your anchor
      const result = regx.exec(href);
      // 检测是否可以匹配到你的锚点
      // Check if it matches your anchor
      if (result && result.length === 1 ) 
        const name = result[0].replace(‘#‘,‘‘);
        // 替换锚点链接中#
        // Replacement anchor link#
        document.querySelector(`a[name="$decodeURI(name)"]`).scrollIntoView();
        // 拿到你的锚点元素并移动到锚点的位置
        // Get your anchor element and move to the anchor position
        e.preventDefault();
        // 阻止点击带来替换location.href的问题
        // Blocking clicks raises the issue of replacing location. href