我正在为我的论坛玩一些 bbcode，我偶然发现了一个关于多个嵌套引用的问题。 我正在尝试在鼠标悬停时实现图像工具提示。
<a href="javascript:void;" onmouseover="tooltip.show(\'<img src=\1.jpg>\', 200);" onmouseout="tooltip.hide();">\1</a>',
（\1是用户在[img][/img]标签之间输入的值。）
如您所见，我的 img src 周围没有引号。用嵌套引号表示这一点的正确语法是什么？ 我尝试使用反斜杠（\\" 等），但这不起作用。
有什么想法吗？
【问题讨论】：
&quot;。看我的回答。
标签： javascript html nested mouseover quotations
一旦您停止在 HTML 中内联添加事件侦听器，您的所有引用（以及许多其他）问题都会消失。
HTML 是用来表示文本和多媒体数据的，它不应该包含内联 CSS 和 JavaScript。
作为第一步，您可以重新组织您的代码，以便所有 JavaScript 都位于单独的文件中。
在 HTML 中：
<a class="bbcode-link" data-src="\1">\1</a>
<script src="script.js"></script>
在script.js:
function showTooltip(e) {
var filename = e.target.getAttribute('data-src')
return tooltip.show('<img src="' + filename + '.jpg" />', 200)
}
function hideTooltip() {
return tooltip.hide()
}
[].forEach.call(
document.querySelectorAll('a.bbcode-link'),
function (link) {
link.addEventListener('mouseover', showTooltip, false)
link.addEventListener('mouseout', hideTooltip, false)
}
)
我还希望您在将用户输入插入 HTML 之前对其进行清理。
参考链接：
element.addEventListener at MDN（Firefox、Chrome、Opera、Safari、IE9+）element.attachEvent at
MSDN (IE6-8)【讨论】：
addEventListener（最后一个定义处理程序是在捕获阶段还是冒泡阶段触发），并且该函数在 IE8 及以下版本中不存在.创建一个额外的函数来区分 W3C 和 IE 并不难。或者如果代码真的很简单，我只需将事件处理程序分配给属性：link.onmouseover = function(){...} 等。
这应该可行。
<a href="javascript:void;"
onmouseover="tooltip.show('<img src="\1.jpg">', 200);"
onmouseout="tooltip.hide();">\1</a>',
仔细检查我是如何使用&quot; 来防止浏览器将引号解析为属性值分隔符的。此外，您不必在属性值内转义 ' 字符。
【讨论】：