在 html 的内联事件属性(如 `onclick`)中调用含双引号的 javascript 代码时,若选择器本身包含双引号(如 `[action*=”12345″]`),会导致引号提前闭合、语法报错;解决方法是统一外层使用双引号,内部属性值改用转义的单引号。
HTML 属性值通常由双引号(”)或单引号(’)包裹,而 document.querySelector() 的参数本身是一个字符串,其中 CSS 选择器又可能包含引号。当选择器中出现与外层 HTML 属性相同类型的引号时,就会发生解析冲突。
例如,原始写法:
<a onclick="document.querySelector('[action*="12345"] .cbSearchButton').click()">
❌ 错误原因:外层 onclick 使用双引号,而选择器内部的 “12345” 被浏览器误认为是 onclick 属性值的结束位置,导致后续内容(如 ] .cbSearchButton’)…)脱离 JS 上下文,引发语法错误或运行时异常。
✅ 正确做法:保持 onclick 外层为双引号,将选择器内部的属性值引号改为单引号并转义(因字符串本身在双引号 JS 字符串中):