在 onClick 之前执行 href

Question

我有以下链接：

<a href="#HDR" onClick="showGallery()">I</a>

这里使用以下Javascript代码：

function showGallery(){
    if(window.location.hash) {
      $('#gallery').fadeIn('fast');
      var hash = window.location.hash.substring(1);
      alert(hash);
    } else {

    }

}

所以只有在URL中有一个井号时，它才会显示画廊。但当我单击链接时，什么也没有发生。当我点击两次时，画廊淡入。

所以这个链接首先执行javascript，但由于URL中没有井号，它不起作用，然后它执行href并在URL中插入井号。 我该如何做呢？

我的目标是：

当我单击链接时，它打开一个画廊。为了知道我必须打开哪个画廊，在URL中插入一个井号。在这里，我想显示HDR相册。如果我的网站使用井号打开，它也应该显示画廊！

还有另一种更简单或更干净的方法吗？希望你能理解我的意思。

- user1671245

Answer 1

对于现代浏览器，您可以将JavaScript代码绑定到onhashchange事件上。链接将不包含JavaScript：

<a href="#HDR">I</a>

每当哈希值改变时，Javascript 会运行：

function locationHashChanged() {
    if (location.hash === "#HDR") {
        $('#gallery').fadeIn('fast');
    }
}

window.onhashchange = locationHashChanged;

- Sjoerd

---

很好！那是“优雅”的方法 :) 谢谢+1和接受 ;) 但是window.onhashchange = locationHashChanged; 是什么意思呢？ - user1671245

它添加了一个事件处理程序，这样每当窗口上触发hashchange事件时，函数locationHashChanged就会被调用。在jQuery中，这将是 $(window).bind('hashchange', locationHashChanged)。 - Sjoerd

Answer 2

您是否尝试使用setTimeout调用来延迟onclick事件？

像这样：

<a href="#HDR" onClick="setTimeout(function(){showGallery.call(this)},20)">I</a>

- LittleSweetSeas

---

该死，很丑陋...但在我的情况下这是唯一可能的方法。呃！ - andrea.rinaldi

Answer 3

您可以简化这个过程，使用 href 属性进行除纯导航之外的其他事情并不是好的实践。

<a onClick="showGallery('HDR')">I</a>

然后：

function showGallery(name){
    if(name) {
        $('#gallery').fadeIn('fast');
        alert(name);
    } else {

    }
}

- beyond-code

---

我也尝试过这个。但是然后画廊只能通过这个链接打开。我也想在网址中显示#HDR，并更新网站。例如使用CTRL + R。 - user1671245

啊好的，那么你应该使用下面Sjoerd的答案，但是你可能需要再多了解一些关于哈希变更的事情以及哪些浏览器支持它。 - beyond-code

Answer 4

你不需要验证窗口的哈希值，因为在第一次点击时地址栏中没有任何哈希值。这种功能仅适用于第二次点击。

你可以这样做：

<a href="#HDR" id="g1" onClick="showGallery('g1')">相册1</a>

function showGallery(galid){
    var linkhash = $('#' + galid).attr('href').substring(1);

    alert(linkhash);

    $('#gallery' + linkhash).fadeIn('fast');
}

- Sorin Haidau

Answer 5

如果你想在不跟随链接的情况下运行showGallery()，正确的代码应该是这样的：

<a href="#HDR" onClick="showGallery(); return false;">I</a>

通过保留href，用户仍然可以在状态栏中看到目标，并且对于没有启用Javascript（例如Google）的客户端，导航仍然有效。通过在事件处理程序中返回false，您可以防止浏览器跟随链接。

在showGallery()中，您可以显示画廊并将“#HDR”添加到location.hash中。

- Sjoerd