jQuery appendTo在Firefox上断开链接

jQuery appendTo breaks links on Firefox

本文关键字：断开 链接 Firefox appendTo jQuery      更新时间：2023-09-26

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

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

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

有什么好办法吗?我想使用一些跨浏览器兼容的解决方案

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

我建议你为火狐开发者打开一个bug，也许他们能帮你找到更好的解决方法。

编辑:

找到解决方案了!

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

问题是因为你使用的是mousedown事件而不是click事件…所以FF不会触发两个事件(不像chrome和IE)，只触发鼠标按下事件，所以你的解决方案(在FF v31上测试):

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

编辑:因为鼠标下降必须工作，这是FF的一个bug，也许只有点击或鼠标下降必须立即启动。所以它有点不优雅，但是复制了你想要的解决方案。

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

 this.click();

或者更好，从另一个答案中提到的SO (Firefox上的鼠标向下和单击冲突)，没有比赛事件会发生:

。涟漪{pointer-events:没有;}

从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中解决了这个问题。

相关文章：