Accordion组件内链接点击无响应问题排查与修复需求

问题 #

用HTML和原生JS实现手风琴组件后，点击组件内表格里的链接无法正常打开，但右键选择在新标签页打开可正常访问。尝试添加.on('click', 'a', function(e) { e.stopPropagation(); })后，手风琴的展开/折叠功能直接失效。

原因 #

原代码的核心问题：

• 给手风琴容器绑定click事件时，全局调用了e.preventDefault()，这会阻止所有a标签的默认跳转行为，包括表格内的正常链接
• 之前的错误尝试使用了jQuery语法（.on），但项目用的是原生JS，且错误阻止了所有a标签的事件冒泡，导致手风琴标题的点击逻辑无法触发

解决方法 #

只针对手风琴标题的a标签执行阻止默认行为和展开/折叠逻辑，内容区域的链接保持正常跳转：

1. 移除事件监听函数开头的全局e.preventDefault()
2. 仅在确认点击的是带有accordionTitle类的a标签时，才调用e.preventDefault()并执行手风琴逻辑

修改后的JavaScript代码 #

( function( window ) {
'use strict';
function classReg( className ) {
return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
}
var hasClass, addClass, removeClass;

if ( 'classList' in document.documentElement ) {
hasClass = function( elem, c ) {
return elem.classList.contains( c );
};
addClass = function( elem, c ) {
elem.classList.add( c );
};
removeClass = function( elem, c ) {
elem.classList.remove( c );
};
}
else {
hasClass = function( elem, c ) {
return classReg( c ).test( elem.className );
};
addClass = function( elem, c ) {
if ( !hasClass( elem, c ) ) {
elem.className = elem.className + ' ' + c;
}
};
removeClass = function( elem, c ) {
elem.className = elem.className.replace( classReg( c ), ' ' );
};
}

function toggleClass( elem, c ) {
var fn = hasClass( elem, c ) ? removeClass : addClass;
fn( elem, c );
}
var classie = {
hasClass: hasClass,
addClass: addClass,
removeClass: removeClass,
toggleClass: toggleClass,
has: hasClass,
add: addClass,
remove: removeClass,
toggle: toggleClass
};
if ( typeof define === 'function' && define.amd ) {
define( classie );
} else {
window.classie = classie;
}
})( window );
var $ = function(selector){
return document.querySelector(selector);
}
var accordion = $('.accordion');
accordion.addEventListener("click",function(e) {
e.stopPropagation();
// 移除全局的e.preventDefault()
if(e.target && e.target.nodeName == "A") {
var classes = e.target.className.split(" ");
if(classes) {
var isAccordionTitle = false;
for(var x = 0; x < classes.length; x++) {
if(classes[x] == "accordionTitle") {
isAccordionTitle = true;
var title = e.target;
var content = e.target.parentNode.nextElementSibling;
classie.toggle(title, 'accordionTitleActive');
if(classie.has(content, 'accordionItemCollapsed')) {
if(classie.has(content, 'animateOut')){
classie.remove(content, 'animateOut');
}
classie.add(content, 'animateIn');
}else{
classie.remove(content, 'animateIn');
classie.add(content, 'animateOut');
}
classie.toggle(content, 'accordionItemCollapsed');  
}
}
// 只有点击手风琴标题时才阻止默认行为
if(isAccordionTitle) {
e.preventDefault();
}
}  
}
});

关键修改点 #

• 移除了事件函数开头的e.preventDefault()
• 增加了isAccordionTitle标记，仅在点击手风琴标题a标签时才调用e.preventDefault()

这样修改后，手风琴的展开/折叠功能正常，表格内的链接也可以正常点击跳转。

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