jQuery appendTo 在 Firefox 上断开链接

Question

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

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

如您所见，当您在 Chrome 中单击该链接时，它可以工作，但 Firefox 只运行 js 并忽略该链接。

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

Answer 1

如果您不添加$overlay div，则链接将按预期工作，并且您将获得大部分视觉效果。我不知道为什么，但添加该 div 会破坏链接 - 并且仅在 Firefox 上。

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

编辑： 找到了解决办法！

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

Answer 2

问题是因为您使用的是 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 { 指针事件：无； }

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

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

编辑

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