触发链接的点击不会改变位置哈希值。

Question

我正在开发一个Web应用程序，在某些情况下使用onHashChange事件监听器，并且通过手动单击链接href="#hash"可以正常工作。但是，当我使用jQuery的$('a[href=#"hash"]').trigger('click')或$('a[href=#"hash"]').click()触发相同链接的单击时，地址栏中的哈希并没有改变。

这是我做错了什么吗？还是我需要使用另一种方法来实现这个目的？ HTML

<a href="#hash">Do Something</a>

JS

// Not working
$('a[href="#hash"]').click();

// Not working
$('a[href="#hash"]').trigger('click');

- Farid Rn

---

您能使用 JSFiddle 演示一下吗？ - Anubhav

你在点击事件处理程序中使用了 preventDefault() 吗？ - AndFisher

愚蠢的问题。为什么要触发链接上的点击？为什么不完全在程序中处理它呢？ - allnodcoms

@allnodcoms 想象一下一个页面，当它带有URL哈希值加载时，会根据URL的哈希值执行某些操作。而更改哈希值也会执行相同的操作。我想创建一个默认哈希值，如果用户在URL中没有任何哈希值打开页面，则模拟点击默认按钮。如果我的问题描述不太清楚，请原谅；但请相信，它并不像你想象的那么愚蠢！ - Farid Rn

@FaridRn - 我以前用过这种方法，但不是通过链接，而是直接设置“window.location”... 简单多了。 - allnodcoms

@gaetanoM 我真的很喜欢你的回答。从jQuery选择器对象中获取第一个项目是有效的！ - Farid Rn

Answer 1

新手报道，希望不会闯祸。我想也许我在网站上使用的这段代码可以帮到你，它似乎与你描述的相似。

$(document).ready(function(){
  $('a[href^="#"]').on('click',function (e) {
    e.preventDefault();

    var target = this.hash;
    var $target = $(target);

    $('html, body').stop().animate({
      'scrollTop': $target.offset().top
    }, 900, 'swing', function () {
      window.location.hash = target;
    });
  });
   });

- awaybackhome

---

所以你是手动更改位置哈希值，对吧？我在想为什么单击触发方法没有做同样的事情？一旦你在一个元素上调用trigger('click')，一切都像用户点击它一样，但是URL的更改只会在手动点击时发生，而不是在触发器上。 - Farid Rn

我不知道关于anchor.hash +1的事情。 - Musa

就像我说的一样。它似乎与我读到的内容相似，我希望那里的某些东西能引发解决方案！抱歉。希望我能提供更多帮助。我不知道你所说的手动是什么意思。在HTML中标记#locations后，JS就可以简单地工作。它在codepen上。 - awaybackhome

@awaybackhome 你的回答可能不会直接帮助到我，但相信我，它可能会帮助到其他开发者。为鼓励新用户点赞 +1。 - Farid Rn

Answer 2

你写的是对的（调试jQuery源代码就足够了）：触发点击事件不能在锚点上工作。

为了实现你想要的效果，你可以获取dom元素，然后触发点击：

$('a[href="#hash"]').get(0).click()

这只会起作用。

- gaetanoM

Answer 3

click 方法（当使用 jquery 时）会触发您使用 el.click(function.. 和 el.on('click', function... 注册的 click 事件。

您可以创建一个新的 MouseEvent 并直接将其分派到相关元素：

e = document.createEvent('MouseEvents');
e.initEvent("click", true, true);
$('a[href="#hash"]')[0].dispatchEvent(e)

以上代码适用于Chrome、Firefox和IE浏览器。

或者仅使用元素的click事件（该事件不使用jquery的click函数，而是浏览器的click函数）：

$('a[href="#hash"]')[0].click()

请注意，由于安全原因，此代码可能无法在几个浏览器中运行。

- Dekel

---

jQuery自己的trigger click不是已经做了这个吗？ - Farid Rn

抱歉，我不明白。如果我在一个有实际（url）href的链接上触发点击事件，位置会改变到给定的href。但是对于仅有哈希标记的href却无法正常工作。为什么会这样？你建议创建新的点击事件，但我想知道为什么点击事件不能做同样的事情！ - Farid Rn

你确定它能工作吗？我刚在Chrome/Firefox/IE上测试过 - 对于普通的链接，$('a').click()并不起作用... 什么也没发生。 - Dekel

看起来我错了。正如@gaetanoM所指出的那样，触发器不适用于锚标签。 - Farid Rn

我遇到了一些令我困惑的事情！$('a[href="#hash"]')[0].click();和$('a[href="#hash"]')[0].trigger('click');之间有什么区别吗？第一个可以工作，而第二个不行！jQuery文档说，没有参数的click与trigger(click)是相同的。 - Farid Rn

关于你的第一条评论——它也在我的答案中（你应该正确阅读更新）。至于第二条评论——你使用 trigger 在元素上的第二行有错误（而不是在jquery对象上），你不能这样做。打开控制台并检查错误。 - Dekel