Question

我在jQuery中重新创建了材质设计涟漪效果，它在IE11和Chrome 46中运行良好，但在Firefox 39上，如果我将效果应用于链接，它会阻止重定向。我设法发现破坏我的代码的函数是jQuery.appendTo()函数。

小提琴： http://codepen.io/grekomp/pen/pjpzKQ

正如您所看到的，当您点击Chrome中的链接时，它可以运行，但Firefox只会运行js并忽略该链接。

知道怎么解决吗？我想使用一些跨浏览器兼容的解决方案。

Answer 1

问题是因为你正在使用mousedown事件而不是click事件......所以FF不会触发这两个事件（与chrome和IE不同）并且只触发mousedown事件以便你的解决方案（在FF上测试） V31）：

$('.ripple').on('mousedown', rippleEffect );

编辑：因为mousedown必须工作，它在FF中的一个错误可能只有click或mousedown必须立即触发。所以它有点不雅，但复制了你要求的解决方案......

将此添加到您的mousedown处理程序的末尾

 this.click();

甚至更好，从另一个答案（Mousedown and Click conflict on Firefox）中提到的SO来说，没有比赛事件会发生：

a.ripple { pointer-events：none; }

Answer 2

如果您不添加$overlay div，则链接按预期工作，您将获得大部分视觉效果。我不确定为什么，但是添加div会破坏链接 - 而且仅限于Firefox。

我建议您为Firefox开发人员打开一个错误，也许他们可以帮助您找到更好的解决方法。

修改 找到了解决方案！

将pointer-events: none; css添加到.ripple-effect和.ripple-overlay div中。

Answer 3

从this切换到$(this)以将JQuery应用于对象：

$("a").on("mousedown", function() {
    var p = $(this);
    var div = $('<div/>');
    div.text("Hello");
    div.appendTo(p);
});

$("a").click(function() {
    $(this).css("color", "green");
});

在Windows上的FF 41中测试过。 http://codepen.io/anon/pen/xwpGNw

在新代码中，我找到了：

$overlay.addClass('ripple-overlay')
    .css({
    background: $(this).data("ripple-color")
})
    .appendTo($(this));;

删除额外的分号不会有太大的不同，但是在JSHint上却受到了影响。我甚至将相同的代码移动到jsfiddle进行测试：http://jsfiddle.net/Twisty/p4fvjvtf/我用微小的变化分叉你的笔，仍然有效：http://codepen.io/anon/pen/xwpwOE

也许我错过了什么不起作用。

修改

根据评论，将pointer-events: none;添加到创建的DIV的CSS中似乎解决了问题。

jQuery appendTo打破了Firefox上的链接

3 个答案: