点击模态框触发元素内指定区域时阻止模态框打开的实现

Hey John, 这个问题本质是事件冒泡搞的鬼——你的模态框触发逻辑绑定在.thumbnail-variant-5这个父元素上，当你点击它内部的.link-group（或者里面的图标）时，点击事件会顺着DOM树向上冒泡，最终触发父元素的模态框显示。

要解决这个问题，只需要在你想"豁免"的子元素上阻止事件冒泡就行，下面给你两种实用的实现方式：

方法1：用jQuery实现（适合已引入jQuery的项目） #

直接在你的JS代码里加这段逻辑：

// 监听.link-group的点击事件
$('.link-group').on('click', function(e) {
  // 阻止事件向上冒泡到父元素，这样模态框就不会被触发
  e.stopPropagation();
  
  // 这里可以添加你自己的逻辑，比如打开社交链接、执行其他操作
  // 如果里面是a标签，还可以加上 e.preventDefault(); 来阻止默认跳转
});

方法2：原生JavaScript实现（无依赖） #

如果项目没用到jQuery，用原生JS也能搞定：

// 获取目标元素
const linkGroup = document.querySelector('.link-group');
// 添加点击事件监听
linkGroup.addEventListener('click', function(e) {
  // 阻止事件冒泡
  e.stopPropagation();
  
  // 自定义操作逻辑写在这里
});

额外提示： #

• 如果.link-group里有多个可点击的图标元素，可以把选择器改成.link-group > span（或者对应标签），确保每个子元素的点击都能阻止冒泡。
• 如果子元素是<a>标签，记得加上e.preventDefault()来避免默认的跳转行为干扰你的逻辑。

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