Question

我在使用下面代码的花式框时遇到问题，链接仍然是通过youtube进行的。花哨的盒子开始弹出＆＃39;但随后页面会指向youtube链接。

JQuery的

$("a.youtube-link").click(function(e) {
    e.preventDefault();
    $.fancybox({
        'padding'       : 0,
        'showCloseButton': false,
        'title'         : this.title,
        'href'          : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/') + '?showinfo=0',
        'type'          : 'swf',
        'swf'           : {
            'wmode' : 'transparent',
            'allowfullscreen' : 'true'
        }
    });
    return false;
});

HTML代码

<div class="img-wrap">
  <a href="http://www.youtube.com/watch?v=videoid" class="img-link youtube-link" target="_self">                    
    <img src="link-to-imv" alt="">
  </a>
</div>

任何帮助表示感谢。

Answer 1

尝试添加stopPropagation（）也可以阻止事件冒泡。

$("a.youtube-link").click(function(e) {
e.preventDefault();
e.stopPropagation();
$.fancybox({
    'padding'       : 0,
    'showCloseButton': false,
    'title'         : this.title,
    'href'          : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/') + '?showinfo=0',
    'type'          : 'swf',
    'swf'           : {
        'wmode' : 'transparent',
        'allowfullscreen' : 'true'
    }
});
return false;

}）;

Answer 2

做这样的事

<a href="#" class="img-link youtube-link" target="_self">

然后将绝对值添加到js代码中的href

Answer 3

在我看来，你有一个奇特的盒子，所以很可能你有一个动态生成的锚链接，如果是这种情况，那么你必须将事件委托给最近的静态父或{{1} }：

document

尝试使用事件委派。

Answer 4

似乎问题是：

$('a').on('click touchend', function(e) {
  var el = $(this);
  var link = el.attr('href');
  window.location = link; 
});

上面是我的js文件，以帮助iOS触摸事件，解决这个问题。

Answer 5

看起来你的函数永远不会达到返回false的程度。

尝试取消绑定您的元素，然后将其绑定到您的函数：

$(document).off("click", "a.youtube-link");

然后：

$(document).on("click", "a.youtube-link", function(){
  $.fancybox({
    'padding'       : 0,
    'showCloseButton': false,
    'title'         : this.title,
    'href'          : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/') +  '?showinfo=0',
    'type'          : 'swf',
    'swf'           : {
        'wmode' : 'transparent',
        'allowfullscreen' : 'true'
    }
  });
  return false;
});

此外，请检查您的控制台是否存在任何javascript错误，并在返回false时放置断点以检查是否已触发。

防止默认不能用于花式框的锚链接

5 个答案: