没有明显原因的鼠标悬停事件触发？答案

【问题标题】：mouseover event firing for no apparent reason?没有明显原因的鼠标悬停事件触发？
【发布时间】：2014-10-23 06:15:34
【问题描述】：

我正在我正在开发的网站上进行一些安全测试，但我遇到了一些我似乎无法解释的行为。在这个jsFiddle 中可以看到一个简化的示例，其中包含 HTML：

<div id="test">This is a test!</div>

和javascript：

$(function(){
    $('#test').mouseover(function(){
       $(this).innerHtml = "test*<script>alert('mouse over fired!');</script>*test"; 
    });
});

令我惊讶的是，这个渲染（没有鼠标悬停...）：

*test"; }); }); });//]]>
This is a test!

我觉得这很奇怪，所以我添加了一个警报like so：

$(function(){
    $('#test').mouseover(function(){
        alert("</script>");
       $(this).innerHtml = "test*<script>alert('mouse over fired!');</script>*test"; 
    });
});

我再次感到惊讶，因为这一次我的鼠标悬停事件在页面加载后立即触发。我认为这可能是一个 jsFiddle 错误，所以我创建了一个 simple HTML document，但它具有相同的行为。我能够在 Chrome、Safari 和 Firefox 中重现。

谁能解释为什么会这样？

【问题讨论】：

alert('mouse over fired!') 被执行是因为 .innerHTML 解析（或者“评估”将是更合适的词）提供的字符串。 *test"; }); }); });//]]> 在页面中，因为 </script> 被解释为脚本的结尾。我可以建议的是去掉代码中的 HTML 标签：fiddle

标签： javascript jquery

【解决方案1】：

改为：

$(function(){
    $('#test').mouseover(function(){
       $(this).html("test*<script>alert('mouse over fired!');<" + "/script>*test"); 
    });
});

您需要拆分</script>，这样它就不会被解释为原始<script>标签的结尾。

另外，innerHTML 是 DOM 属性，而不是 jQuery 属性。如果你想让脚本被执行，使用jQuery的.html()方法；分配给.innerHTML 不会执行脚本。你也弄错了名字，它是.innerHTML，而不是.innerHtml——Javascript 是区分大小写的。

DEMO

【讨论】：

另外你可以使用 <和>打印以避免关闭脚本
不，我想要渲染实际的脚本标签
@AbeMiessler 如果您想在鼠标悬停时显示alert（执行脚本） - 那么是的。但这绝对不安全:)
如果您想执行警报脚本，只需将以下警报添加到您的 .html 行
@xzegga 这不起作用，它按字面意思显示括号：jsfiddle.net/barmar/p8nz8grj/10

【解决方案2】：

如果我理解正确，您希望在该元素被鼠标悬停时出现警报。如果是这种情况，下面的代码将是：

$(function(){
    $('#test').mouseover(function(){
        alert('mouse over fired!');
    });
});

【讨论】：

【解决方案3】：

如果您想执行警报脚本并始终更改 div 内容，则需要在您的函数中包含警报命令，如下所示：

$(function(){
    $("#test").mouseover(function(){
       $("#test").html("test* *test") ;
        alert('mouse over fired!');
    });
});

【讨论】：