“onclick”事件在 FF 和 Chrome 中不起作用答案

【问题标题】："onclick" event not working in FF and Chrome“onclick”事件在 FF 和 Chrome 中不起作用
【发布时间】：2014-05-08 23:42:24
【问题描述】：

我在一个带有onclick 属性的 div 中有一些 SVG 路径：

<path class="limbs" id="limb1" d="some coordinates here" onclick="open(1)" />

open() 函数定义在一个单独的 JS 文件中，该文件在 body 标记之前实现（就像 jQuery 文件一样）：

function open(n) {
    $("#information").fadeIn();
    $("#info" + n).fadeIn();
}

例如div#info1是div#information内部的信息框，全屏半透明黑色背景（给人一种灯箱般的效果）。

使用 Safari 一切正常。但是，如果我用 FF 或 Chrome 尝试它，当我点击时，浏览器似乎会加载一个新页面（这不应该发生），它会导致一个没有源代码的空白屏幕。

可以在这里看到页面：frank.schufi.ch/3dmapping

【问题讨论】：

你不应该使用onclick。相反，最好使用jQuery .on 方法。
在第 29 行的 3dmapping.js 文件中，您将一个函数传递给 jquery 对象。你确定那是你的意图吗？通常只有 dom 元素或 css 选择器字符串被传递给 JQuery 对象。
@KemHeyndels : $(function() {..}); 等同于 $(document).ready(function() {..});

标签： javascript jquery google-chrome firefox onclick

【解决方案1】：

浏览器之间存在一些不匹配的行为，所以这可能是它发生的原因至于什么，在我看来，其他open(n) 函数正在被调用。尝试更改函数名称，让我们说：

newOpen(n)

看看有没有帮助。

【讨论】：

哇。我无法想象它会这么简单！非常感谢！
令人惊讶的是，Google 是如何一口气把我带到这里的，继续“firefox onclick 白屏加载”。感谢您拯救了我的夜晚！

【解决方案2】：

正如 Haocheng 评论的那样，一种更新的方法是制作一个用于单击路径的事件处理程序。改用这个 jQuery sn-p 基本上可以达到相同的目标：

$('.limbs').click(function() {
    $("#information").fadeIn();
    $("#info" + $(this).attr('id')).fadeIn();
});

我不确定这是否会对结果产生影响，正如有人指出的那样，这可能与您将函数命名为 open() 的事实有关，所以它可能。如果您仍然遇到问题，我建议您尝试添加preventDefault()，如下所示：

$('.limbs').click(function(event) {
    event.preventDefault();
    $("#information").fadeIn();
    $("#info" + $(this).attr('id')).fadeIn();
});

这会从 HTML 中删除默认行为。例如，如果 .limbs 将附加到 <a> 元素，它将阻止遵循该链接的标准行为。再说一次，将函数重命名为 newOpen() 也可能就足够了。 :)

【讨论】：

【解决方案3】：

<path class="limbs" id="limb1" d="some coordinates here" data-open="1"  />

$('#limb1').click( function (e){
e.preventDefault();
var n = $(this).data('open');
$("#information").fadeIn();
$("#info" + n).fadeIn();
}

【讨论】：

【解决方案4】：

onclick 似乎不是<path /> 的有效属性。因此浏览器可能不会为该事件添加侦听器。尝试将<path /> 元素包装在一个元素中，该元素将触发onclick 事件，然后将onclick 放在该元素上，或者按照这里的一些其他答案的建议，使用jQuery 在该dom 元素上强制监听器并单击时触发事件。你可以使用 vanilla js 来 addEventListener 并在没有 jQuery 的情况下完成同样的事情。

【讨论】：