Question

我在div中有一些带有onclick属性的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

Answer 1

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

newOpen(n)

看看它是否有帮助。

Answer 2

正如Haocheng评论的那样，更新的方法是制作一个用于单击路径的事件处理程序。您基本上可以使用此jQuery代码段实现相同的目标：

$('.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（）也可能就足够了。：）

Answer 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();
}

Answer 4

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

“onclick”事件无法在FF和Chrome中运行

4 个答案: