zoukankan      html  css  js  c++  java
  • 关于vue 和react 中的hash与锚点冲突问题

      // 可以利用事件委托进行处理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
          }
        }
      }
  • 相关阅读:
    [Java] [Exception]
    [Go back to REDIS]
    [Java] [内存泄露]
    [ZK] [Related Materials]
    [Scala] [Coursera]
    <zk在大型分布式系统中的应用>
    [Java] [Lock] [Synchronized VS ReentrantLock]
    [Data Structure] Tree
    投影矩阵的计算过程
    SQL Server 2012
  • 原文地址:https://www.cnblogs.com/l8l8/p/11276068.html
Copyright © 2011-2022 走看看