为带href的div设置点击优先级问题求助

嘿，这个问题其实很常见，本质是事件冒泡在搞鬼——你的关闭按钮嵌套在带href的链接标签里，点击按钮时事件会向上冒泡到父级的链接，触发了默认的跳转行为。下面给你两种简单有效的解决思路：

方案一：给关闭按钮绑定事件，阻止冒泡与默认行为 #

直接给关闭按钮单独绑定点击事件，在事件里阻止事件向上传递，同时避免触发链接的跳转逻辑：

// 找到所有关闭按钮（如果有多个浮动层的话）
document.querySelectorAll('.glyphicon-remove').forEach(closeBtn => {
  closeBtn.addEventListener('click', function(e) {
    // 阻止事件冒泡到父级的a标签，避免触发链接跳转
    e.stopPropagation();
    // 保险起见，直接阻止默认行为
    e.preventDefault();
    
    // 执行关闭浮动层的逻辑，这里假设你的浮动层有类名.bookmark-float-layer
    const floatLayer = this.closest('.bookmark-float-layer');
    floatLayer.style.display = 'none';
    // 如果是用CSS类控制隐藏的话，也可以写成：floatLayer.classList.add('hidden');
  });
});

方案二：在链接的点击事件里做判断 #

给包含浮动层的链接绑定点击事件，判断点击的目标是不是关闭按钮，如果是就拦截跳转，否则正常执行：

document.querySelectorAll('.bookmark-float-layer a').forEach(bookmarkLink => {
  bookmarkLink.addEventListener('click', function(e) {
    // 检查点击的目标是否是关闭按钮，或者是按钮的子元素
    if (e.target.closest('.glyphicon-remove')) {
      // 阻止链接跳转
      e.preventDefault();
      // 关闭浮动层
      this.closest('.bookmark-float-layer').style.display = 'none';
    }
    // 若点击的不是关闭按钮，就会默认执行链接跳转，无需额外操作
  });
});

两种方案都能解决你的问题，方案一更直接针对关闭按钮，方案二则是从链接层面做拦截，你可以根据自己的代码结构选择适合的方式~

内容的提问来源于stack exchange，提问作者prr