在前端开发时, 直接在页面标签中写入onclick等事件触发,可以不用那么担心引号转义问题,但如果是在事件方法内部触发是,就容易遇到字符串引号转义无法触发的问题。

实际样例:

<script type="text/javascript">
    window.onload = function () {
        var panel = document.getElementById("panel");
      panel.innerHTML = "<a href='#' onclick='alert('ABC')'>Hello</a>";
 }
   
</script>

<body>
    <div id="panel"></div>
</body>

在这个示例中通过javascript在id为panel的div的innerHTML中写入a标签并且加入onclick事件,innerHTML值是字符串,因此这里的onclick是双重引号,上面的写法是无法触发onclick的。

那么正确的写法应该是:panel.innerHTML = "<a href='#' onclick='alert(\"ABC\")'>Hello</a>";。这里的alert用的单引号包装,括号内通过斜杠转义双引号。

还可以这样写:panel.innerHTML = "<a href=\"#\" onclick=\"alert('ABC')\">Hello</a>";。在外面斜杠转义,alert括号内部单引号字符串。同时也可以这种方式写:panel.innerHTML = '<a href=\"#\" onclick="alert(\'ABC\')">Hello</a>';

另外一种写法:panel.innerHTML = "<a href='#' onclick='alert(&quot;ABC&quot;)'>Hello</a>";。这种写法不建议它是将引号的转义代码直接写入到alert中的。

其它样例:

<script type="text/javascript">
    window.onload = function () {
        var val = "abc";
        var panel = document.getElementById("panel");
        panel.innerHTML = "<a href='#' onclick='setVal(\"" + val + "\")'>Hello</a>";
  
    }

    function setVal(obj) {
        document.write(obj)
    }

</script>

在这种情况下是很常见的,定义的方法中需要动态传入参数,这种基本对照上面的思路来写即可完成。