防止默认在花哨框的锚链接上不起作用

prevent Default not working on anchor link for fancy box

本文关键字：链接 不起作用 默认      更新时间：2023-09-26

我在下面的代码中遇到了花哨的盒子问题，链接仍在通过YouTube。花哨的框开始"弹出"，但随后页面会引导YouTube链接。

杰奎里

$("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;
});

网页代码

<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>

任何帮助表示赞赏。

尝试添加 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;

}）;

在我看来

，你有一个花哨的盒子，所以你很可能有一个动态生成的锚链接，如果是这种情况，那么你必须将事件委托给最近的静态父级或document：

$(document).on("click", "a.youtube-link", function(e) {

尝试使用事件委派。

似乎

问题是：

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

以上是在我的js文件中，以帮助处理iOS触摸事件，将其删除可以解决问题。

就做这样的事情

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

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

中

看起来你的函数永远不会达到它返回 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 时放置断点以检查它是否已触发。

只有在 Safari 上以"独立 Web 应用程序"模式访问我的网站时，我才遇到同样的问题（该网站作为应用程序固定到用户主屏幕）。

原来是由于我从原始网站模板继承的以下代码：

/******************************************** Prevent links in standalone web apps opening Mobile Safari *****************************************/
if (("standalone" in window.navigator) && window.navigator.standalone) {
          jQuery('a').on('click', function(e){
            e.preventDefault();
            var new_location = jQuery(this).attr('href');
            if (new_location != undefined && new_location.substr(0, 1) != '#' && jQuery(this).attr('data-method') == undefined){
              window.location = new_location;
            }
          });
        }

我想添加这个答案来帮助其他人，他们可能在他们的 JS 中埋藏着类似的代码并且不知道要寻找什么。

该代码做了它应该做的事情，它允许用户导航链接而无需将它们踢到新的 Safari 窗口中，但是当某些锚/链接附加了自定义 JavaScript 处理程序时，它会产生不必要的副作用。

我

稍微修改了代码以帮助我处理这些情况：

/******************************************** Prevent links in standalone web apps opening Mobile Safari *****************************************/
        if (("standalone" in window.navigator) && window.navigator.standalone) {
          jQuery('body').on('click','a:not(.no-js)',function(e){
            var new_location = jQuery(this).attr('href');
            if (new_location != undefined && new_location.substr(0, 1) != '#' && jQuery(this).attr('data-method') == undefined && jQuery(this).attr('onclick') == undefined){
              window.location = new_location;
            }
          });
        }

我在其他地方有代码专门调用具有no-js类的任何HTML元素preventDefault。我在链接上使用此类，只有在浏览器不支持 Javascript 时才应遵循这些链接，因此我排除了此 onclick 函数处理的任何这些链接。我还添加了一个检查，如果单击的链接指定了自己的"onclick"属性，则不要导航/更新 window.location。

相关文章：