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
          }
        }
      }
  • 相关阅读:
    js弹出DIV层
    .net 生成静态页面
    新开博客
    随机生成验证码
    ASP.NET错误处理方法总结
    webgis
    看樱花
    今天转载的笑话,挺好笑呵
    用Tomcat插件在Eclipse上搭建可跟踪调试的J2EE WEB开发环境
    关于JSTL的简单说明
  • 原文地址:https://www.cnblogs.com/l8l8/p/11276068.html
Copyright © 2011-2022 走看看