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
          }
        }
      }
  • 相关阅读:
    iOS_UIImage的方向(imageOrientation)
    iOS-LaunchImage启动页
    iOS_UIImage_毛玻璃效果
    iOS_常用C语言函数
    iOS_UIImage_Gif的合成
    iOS_UIImage_Gif的分解
    iOS_UIImge_Gif的展示
    iOS_UIImage_jpg<-->png转换
    Mysql学习第三天
    Mysql学习第二天
  • 原文地址:https://www.cnblogs.com/l8l8/p/11276068.html
Copyright © 2011-2022 走看看