javascript - 为什么不显示此弹出窗口？

Question

我对一个非常简单的 JavaScript 弹出脚本有疑问。

我有这个示例页面：http ://www.onofri.org/example/example4/

在此页面的末尾有一个包含一些标志的框，包括由#reportEng div表示的英国国旗（在engLink 链接内）。

我想要的是，当用户单击此元素时，将显示一条弹出消息。

所以我在页面中添加了这个简单的脚本：

<script>
    var test = document.getElementById('engLink');
    test.addEventListener('click', function() {
        alert('clicked');
    });
</script>

我已将脚本放在页面的正文部分而不是头部部分，因为这只是一个测试页面，最终结果将放入我无法访问模板的 CMS 页面中（所以我不能将脚本放在头部）。

问题是它不起作用。如果我单击英文标志，则页面会重新加载并且不会显示弹出窗口。

你能帮助我吗？

谢谢，

安德烈亚

Answer 1

我采用了完全不同的方法。addEventListener 很酷，但我有点老了，而且我已经习惯了讨厌的习惯。这对我来说很好。

<script>
function myExample(){
    alert("BaZing!  It works!");
}
</script>

对于 HTML 部分...

<a href="" id="engLink"><div id="reportEng" onClick="myExample()"></div></a>

我还想指出，这个“修复”有点禁忌（见这里）

Answer 2

您不会阻止链接被关注，因此当您单击具有空的链接时href，您只需重新加载当前页面。

有很多方法可以防止默认链接行为，但这里是老派的方法：

<a href="javascript:void(0);" id="engLink"><div id="reportEng"></div></a>

另外，我不认为HTML 或 XHTML 中的div元素是允许的。a

小提琴

Answer 3

您正在使用 <a> 标记，将其更改为使用 <div> 标记，或完全删除 <a> 标记

您可以按照此操作使 div 可点击。