如何处理HTMLElement.Click（）静默失败

我已经使用类似于this answer的代码通过ajax实现了文件下载按钮。我有一些代码看起来是这样的：如何处理HTMLElement.Click（）静默失败

$('#download-link').on('click', function (event) { 
    event.preventDefault(); 
    var link = $('#download-link').attr('href'); 
    $.ajax({ 
     url: link, 
     success: function (result) { 

      var blob = getBlob(result); 
      var a = document.createElement('a'); 
      var url = (window.URL ? URL : webkitURL).createObjectURL(blob); 
      a.href = url; 
      a.download = 'somefilename.txt'; 
      a.style.display = 'none'; 
      document.body.appendChild(a);      
      try { 
       a.click(); 
      } 
      catch (err) { 
       //fallback. if .click() is unavailable display a new button for user to get file. 
       a.style.display = ''; 
       a.innerText = 'Get File'; 
       var downloadButton = document.getElementById('download-link'); 
       downloadButton.style.display = 'none'; 
      } 
     } 
    }); 
});

所以基本上，我们创建一个URL对象，与对象URL的HREF创建<a>元素和元素上调用Click()下载该文件。有些浏览器会在那个时候抛出一个错误，所以作为回退，我们会捕获错误并显示创建的按钮，以便用户可以按下并获取文件。

问题是，一些浏览器（似乎在iOS和Android的旧版本）将简单地忽略Click()调用。我知道我可能使用浏览器嗅探来处理这个，但我不认为这是一个很好的解决方案。有什么更优雅的，我可以做，以检测这种情况，并使用我的后备？

来源

2017-09-01 Slappywag

哪些错误与一个普通的女主播？ –

我认为常见的用户体验模式是让你的链接文本类似于“如果你的下载不开始点击这里”，而不是隐藏它 –

你需要ajax吗？（$''＃download-link'）。attr（'download'，'somefilename.txt'）'可能根本不需要任何js – Endless

您可以创建一个标记来检查您的脚本是否能够触发单击事件。聆听点击并翻转标志，并在一段时间后处理未检测到点击的情况。

 a.href = url; 
     a.download = 'somefilename.txt'; 
     a.style.display = 'none'; 
     var linkClicked = false; 
     a.addEventListener('click',()=>linkClicked = true); 
     document.body.appendChild(a);      
     a.click(); 
     setTimeout(()=>{ 
      if(!linkClicked){ 
      //fallback. if .click() is unavailable display a new button for user to get file. 
      a.style.display = ''; 
      a.innerText = 'Get File'; 
      var downloadButton = document.getElementById('download-link'); 
      downloadButton.style.display = 'none'; 
      } 
     },500);

另一个解决方案是始终显示的链接，但有沿线链接文本的东西“如果你不能下载请点击这里”

来源

2017-09-01 13:24:41

这绝对是我寻找的更优雅的解决方案，虽然我认为始终显示链接可能是最好的主意。谢谢 – Slappywag

@Professor奥尔曼已经通过检测.click()提供了完美的解决方案功能，而不是嗅探浏览器。

让用户轻松代码中使用，我想重构代码，添加缓存，并把它包装成一个单一的功能：

function hasClickFeature(callback) { 
    if (window.hasAnchorClickFeature !== undefined) { 
    callback(window.hasAnchorClickFeature); 
    } 

    var a = document.createElement('a'); 
    var hasClick = false; 
    a.href='javascript:;'; 
    a.style.display = 'none'; 
    a.addEventListener('click', function() { 
    hasClick = true; 
    window.hasAnchorClickFeature = hasClick; 
    callback(hasClick); 
    }); 
    document.body.appendChild(a); 
    a.click(); 
    setTimeout(function() { 
    if (!hasClick) { 
     window.hasAnchorClickFeature = hasClick; 
     callback(hasClick); 
    } 
    }, 500); 
} 

hasClickFeature(function(hasClick) { 
    console.log(hasClick); 
});

来源

2017-09-01 13:49:48 shaochuancs

如何处理HTMLElement.Click（）静默失败

回答

相关问题