jquery - jquery单击阻止转到页面顶部

Question

我的页面上有许多图像。有些位于页面底部，需要滚动。我发现，当我点击图片时，它又变成了一个视频，它让我进入页面顶部。

这是我的代码：

$('#videoconner').click(function () {
     $(this).replaceWith('<iframe width="280" height="164" src="http://www.youtube.com/embed/6kR2n4344UCAU?autoplay=1&cc_load_policy=1&rel=0" frameborder="0" allowfullscreen></iframe>');
});

我补充说：

e.preventDefault();

但这并没有帮助。

有没有办法阻止进入页面顶部？

Answer 1

将e（用于事件参数）添加到您的点击功能。

$('#videoconner').click(function (e) {
    e.preventDefault();
    $(this).replaceWith('<iframe width="280" height="164" src="http://www.youtube.com/embed/6kR2n4344UCAU?autoplay=1&cc_load_policy=1&rel=0" frameborder="0" allowfullscreen></iframe>');
});

Answer 2

你想返回false；使其停止单击事件执行默认操作并继续冒泡 DOM：

$('#videoconner').click(function () {
  $(this).replaceWith('<iframe width="280" height="164" src="http://www.youtube.com/embed/6kR2n4344UCAU?autoplay=1&cc_load_policy=1&rel=0" frameborder="0" allowfullscreen></iframe>');
  return false;
});

阅读此主题以获取更多信息：event.preventDefault() vs. return false

注意：如果使用 jQuery，返回 false 只会调用 e.stopPropagation，就像这个问题一样。

Answer 3

你需要这样使用preventDefault（添加e回调函数参数）

$('#videoconner').click(function (e) {
  e.preventDefault();
  $(this).replaceWith('<iframe width="280" height="164" src="http://www.youtube.com/embed/6kR2n4344UCAU?autoplay=1&cc_load_policy=1&rel=0" frameborder="0" allowfullscreen></iframe>');
});