Question

我的JavaScript弹出式脚本非常简单。

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

在本页末尾有一个包含一些标志的框，其中包括由 #reportEng div重新命名的英国国旗（在 engLink链接）。

我想要的是，当用户点击此元素时，将显示pop0up消息。

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

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

我已将脚本放在页面的正文部分而不是 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中的div内不允许使用a元素。

FIDDLE

Answer 3

您正在使用＆lt; a＆gt;标记，将其更改为使用＆lt; div＆gt;标记，或删除＆lt; a＆gt;完全标记

您可以点按this以使div可点击。

为什么没有显示弹出窗口？

3 个答案: