修改下载属性后，点击事件.click()无法触发锚点（anchor tag）的问题。

Question

我的情况是，“系统需要通过使用确认框向用户询问‘您是要打开图像还是下载图像？’。如果用户按下确定，我们不应该阻止那个锚点标签的默认操作，让它继续，但是如果用户按下取消，特定的图像应该被下载...

HTML：

<a href="http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=3c6263c3453b">test</a>

JS：

$('a').click(function (e) {
    if (!$(this).is('[download]')) {
        var cond = confirm('Press ok to view, cancel to save..');
        if (!cond) {
            e.preventDefault();
            $(this).attr('download', 'download').click().removeAttr('download');
        }
    }
});

演示

有人能告诉我如何实现这个吗..？

- Rajaprabhu Aravindasamy

---

.trigger()事件有用吗？http://api.jquery.com/trigger/ - ngrashia

@NishanthiGrashia 我认为两者是相同的...在看到你的评论后，我尝试了一下...但它没有响应... - Rajaprabhu Aravindasamy

也许这里能够帮到您。 - Yaje

Answer 1

尝试使用这个方法，$("a")[0].click()可以解决问题。

$('a').click(function (e) {
    if (!$(this).is('[download]')) {
        var cond = confirm('Press ok to view, cancel to save..');
        if (!cond) {
            e.preventDefault();
            $(this).attr('download', 'download');
            $("a")[0].click().removeAttr('download');
        }
    }
});

演示

- Anoop Joshi P

---

而且它没有删除属性，因为它不是一个Jquery对象。我想知道为什么jquery的click()没有起作用。有人能告诉我确切的原因吗？ - Rajaprabhu Aravindasamy

@RajaprabhuAravindasamy，你可以使用this.click();$(this).removeAttr('download');代替$("a")[0].click().removeAttr('download');。http://jsfiddle.net/88dn8/ 你非常清楚如何做到这一点。 - Satpal

@Satpal 但为什么要用 this.click(); 而不是 $(this).click();。 - Jai

@Satpal 是的，我在我的项目中使用了 this.click(); 暂时解决了它的问题。但是为什么 $(this).click() 没有起作用呢？这真的很神秘。 - Rajaprabhu Aravindasamy

@Satpal 但是据我所知，在这里 this.click(); 中的 this 是一个 DOM 节点，而在这里 $(this).click(); 中的 $(this) 是一个 jQuery 对象，因此问题是为什么 jQuery 的 click() 方法可以与 DOM 节点一起使用，但不能与 jQuery 对象一起使用。^^ - Jai

Answer 2

你需要使用this.click();，因为HTMLElement.click()方法模拟了对元素的鼠标单击。

而$(this).click();只会触发jquery click处理程序和绑定到元素的onclick处理程序，没有其他作用。

$('a').click(function (e) {
    if (!$(this).is('[download]')) {
        var cond = confirm('Press ok to view, cancel to save..');
        if (!cond) {
            e.preventDefault();
            $(this).attr('download', 'download');
            this.click()
            $(this).removeAttr('download');
        }
    }
});

演示

- Satpal

---

@RajaprabhuAravindasamy，你的事件被调用了，但是它没有任何作用，因为你的链接.is（'[download]')，使用jQuery通过编程方式触发点击并不会模拟链接点击（这才是你需要的）。 请参见此处的问题。 - billyonecan

@billyonecan，你的评论非常有用，完全澄清了我的疑惑，而且你们还教给我一个之前不知道的新概念... - Rajaprabhu Aravindasamy

Answer 3

$('a').click(function (e) {
  if (!$(this).is('[download]')) {
  var resp = confirm("Press ok to view, cancel to save..!");
   if (resp == true) {
  // You pressed OK
    e.preventDefault();
    } else {
  //    Pressed Cancel!";
     $(this).attr('download', 'download').click().removeAttr('download');
   }        
  }
});

这是你要的工作示例

http://jsfiddle.net/sajrashid/94Hra/18/

- fuzzybear

Answer 4

这个不需要操纵事件冒泡。让浏览器的默认行为处理一切。手动调用事件总是会造成混乱。使用download属性控制行为。根据您的条件添加或删除它，并将球传递给浏览器。

演示

代码：

$('a').click(function (e) {
    var cond = confirm('Press ok to view, cancel to save..');
    if (!cond) {
        $(this).attr('download', 'download');
    } else {
        $(this).removeAttr('download');
    }
});

- Juzer Ali

Answer 5

我检查了你的代码并找到了一个解决方案，因此你需要稍微修改一下代码。

你需要在锚点标签中添加一个名称标签，例如：

<a href="http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=3c6263c3453b" name="myevent">test</a>

现在替换您的代码

$('a').click(function (e) {

使用这个

$(document).on("click","a[name='myevent']", function (e) {

- shaggy

---

http://jsfiddle.net/94Hra/15/ 不工作吗？我不认为这是问题.. :\ - Rajaprabhu Aravindasamy