Question

我正在为我的论坛玩一些bbcode，我偶然发现了一个有关多个嵌套引用的问题。我试图在鼠标悬停时实现图像工具提示。

<a href="javascript:void;" onmouseover="tooltip.show(\'<img src=\1.jpg>\', 200);" onmouseout="tooltip.hide();">\1</a>',

（ \ 1 是用户在[img] [/ img]标签之间输入的值。）

如您所见，我的img src周围没有引号。用嵌套引号表示这个的正确语法是什么？我曾尝试使用反斜杠（\\＆＃34;等），但这不起作用。

有什么想法吗？

Answer 1

一旦停止在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）

Answer 2

这应该有效。

<a href="javascript:void;" 
onmouseover="tooltip.show('<img src=&quot;\1.jpg&quot;>', 200);"
onmouseout="tooltip.hide();">\1</a>',

仔细检查我是如何使用"来阻止浏览器将引用解析为属性值分隔符的。此外，您不必在属性值中转义'字符。

jsfiddle

HTML中的嵌套引号

2 个答案: