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

Question

我遇到了一个非常简单的 JavaScript 弹出脚本问题。

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

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

我想要的是当用户点击这个元素时会显示一条弹出消息。

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

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

我把脚本放在页面的body部分而不是head部分，因为这只是一个测试页面，最终结果将被放入我无法访问模板的 CMS 页面（因此我无法将脚本放在 head 部分）。

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

你能帮帮我吗？

谢谢，

安德烈亚

Answer 1

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

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

对于 HTML 部分...

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

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

Answer 2

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

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

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

另外，我认为在 HTML 或 XHTML 中 a 中不允许使用 div 元素。

FIDDLE

Answer 3

您正在使用 标签，将其更改为使用

标签，或者完全删除 标签

您可以关注this 以使 div 可点击。