码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2019-07-31 15:03:21      阅读:132      评论:0      收藏:0      [点我收藏+]

标签:hat   点击   tor   冲突   issue   handle   事件   cat   位置   

  // 可以利用事件委托进行处理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
      }
    }
  }

 

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

标签:hat   点击   tor   冲突   issue   handle   事件   cat   位置   

原文地址:https://www.cnblogs.com/l8l8/p/11276068.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!