23

我正在尝试创建一个链接，单击该链接时会切换其 href 属性，然后转到该位置。

我的html是：

<a href="http://google.com" rel="group" data-wpurl="http://yahoo.com"></a>

单击时，我希望浏览器转到 data-wpurl 位置，而不是 href 位置。我使用数据属性的原因是因为我使用的应用程序需要使用 href ......这里不相关。

我的 jQuery 是：

$('a[rel="group"]').on('click', function(e) {
      e.preventDefault();
      var wpurl = $(this).attr("data-wpurl");
      $(this).attr('href', wpurl);
});

我正在使用 e.preventDefault(); 以防止浏览器将用户带到 href。将 data 属性分配给 href 后，如何触发点击？使用trigger('click')和click();不工作！

有任何想法吗？

4

4 回答 4

34

类似的解决方案，但无需调用e.preventDefault() 

$('a[rel="group"]').on('click', function(e) {
    e.originalEvent.currentTarget.href = $(this).data('wpurl');
});

从我的角度来看，这是一个更通用、更简洁的解决方案，因为这不会改变默认的浏览器行为（例如：当用户用鼠标滚轮在链接上单击时，使用 Jacks 解决方案不会打开新选项卡）

于 2015-09-07T13:03:36.810 回答
21

立即更改位置会更容易：

e.preventDefault();
location.href = $(this).data('wpurl');
于 2013-05-07T17:41:47.563 回答
10

使用 onmousedown。谷歌在他们的搜索结果页面上使用这种方法，这样他们就可以跟踪你点击的内容。如果您想查看链接的去向，请右键单击而不是左键。它们都触发了 onmousedown 事件。

http://jsfiddle.net/afLE3/

<a href="http://google.com" data-wpurl="http://yahoo.com" onmousedown="rwt(this)">CLICK HERE</a>

<script type="text/javascript">
  rwt = function(e){
    e.href = $(e).data('wpurl');
  }
</script>
于 2014-07-23T21:07:25.150 回答
6

我认为您的原始 jQuery 很好，除了 e.preventDefault(): 这将停止事件触发，无论您在那之后对 href 属性做什么。

$('a[rel="group"]').on('click', function(e) {
      var wpurl = $(this).attr("data-wpurl");
      $(this).attr('href', wpurl);
});

以上所有代码都将在页面刷新之前执行。

于 2015-04-24T09:01:58.843 回答